Theme Plugin Config

These are plugin config provided by theme.

Tips

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

Example: vuepress-plugin-copy-code1 ’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.imageFix

• Type: boolean
• Default: true

Whether to fix image links containing special characters

mdEnhance.lazyLoad Default behavior changed

• Type: boolean
• Default: true

Whether to lazy load every images in page in native way

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.tasklist

• Type: TaskListOptions | boolean
• Default: false

Whether to enable tasklist format support. You can pass an object to config task list.

interface TaskListOptions {
  /**
   * Whether use `<label>` to wrap text
   *
   * @default true
   */
  label?: boolean;
  /**
   * Whether place `<label>` after `<input>` or wrap `<input>`
   *
   * @default true
   */
  labelAfter?: boolean;
}

mdEnhance.tex

• Type: KatexOptions | boolean
• Default: false

Whether to enable $\TeX$ syntax support. You can pass an object to config $\KaTeX$.

mdEnhance.mermaid

• Type: boolean
• Default: false

Whether to enable Mermaid (opens new window) 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.codepenEditors

• Type: string
• Default value: "101"

CodePen editor status

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, you probably don’t need to override the default values.

mdEnhance.demo.babel

Default value: "https://unpkg.com/@babel/standalone/babel.min.js"

mdEnhance.demo.vue

Default value: "https://unpkg.com/vue@2/dist/vue.min.js"

mdEnhance.demo.react

Default value: "https://unpkg.com/react/umd/react.production.min.js"

mdEnhance.demo.reactDOM

Default value: "https://unpkg.com/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 vuepress-plugin-comment1 documentation (opens new window)

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

Copyright Settings

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.

copyright.status

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

Whether to enable this feature globally.

copyright.minLength

• Type: number
• Default value: 100

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

copyright.noCopy

• Type: boolean
• Default value: false

Whether to prohibit copying

copyright.noSelect

• 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)

activeHash

Options for activing hash in links automatically, set to false to disable this feature.

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

chunkRename

Options for renaming chunks, set to false to disable this feature.

chunkRename.pageChunkName

• Type: ((page: Page) => string) | false

• Default:

  ({ title = "", key }): string => {
    const chunkTitle = (title || "").replace(/[.&*?#\\/:"<>| ]/gu, "");
  
    return chunkTitle ? `page-${chunkTitle}` : `page-${key.slice(1)}`;
  };
  

• Required: No

Page Chunk Rename Option. By default, all page chunks will be named with page title.

chunkRename.layoutChunkName

• Type: ((layout: ResolvedComponent) => string) | false

• Default:

  (layout): string => `layout-${layout.componentName}`;
  

• Required: No

Layout Chunk Rename Option. By default, all the layout chunks will be named by their component name.

cleanUrl

Options for cleaning URL suffix, set to false to disable this feature.

cleanUrl.normalSuffix

• Type: string
• Default: ""
• Required: No

Nornal Page suffix. This default behavior will generate a/b.md with /a/b.

cleanUrl.indexSuffix

• Type: string
• Default: "/"
• Required: No

Page suffix for index.md, readme.md and README.md. This default behavior will generate a/readme.md with /a/.

cleanUrl.notFoundPath

• Type: string
• Default: "/404.html"
• Required: No

Link for not found pages.

smoothScroll

Delay to smooth scroll to hash, default is 500.

Set to false to disable this feature.