From da1691d77e371892cbe566ba45ca24f1fa03dc7c Mon Sep 17 00:00:00 2001 From: Evan You Date: Tue, 14 Mar 2023 17:11:20 +0800 Subject: [PATCH] feat(theme): support extending default theme without importing fonts --- docs/guide/extending-default-theme.md | 46 +++++++++++++++++++++++ docs/reference/site-config.md | 2 + package.json | 4 ++ src/client/theme-default/index.ts | 32 +--------------- src/client/theme-default/without-fonts.ts | 33 ++++++++++++++++ 5 files changed, 86 insertions(+), 31 deletions(-) create mode 100644 src/client/theme-default/without-fonts.ts diff --git a/docs/guide/extending-default-theme.md b/docs/guide/extending-default-theme.md index b1b663884a4..b5e70177757 100644 --- a/docs/guide/extending-default-theme.md +++ b/docs/guide/extending-default-theme.md @@ -36,6 +36,52 @@ export default DefaultTheme See [default theme CSS variables](https://github.com/vuejs/vitepress/blob/main/src/client/theme-default/styles/vars.css) that can be overridden. +## Using Different Fonts + +VitePress uses [Inter](https://rsms.me/inter/) as the default font, and will include the fonts in the build output. The font is also auto preloaded in production. However, this may not be desirable if you want to use a different main font. + +To avoid including Inter in the build output, import the theme from `vitepress/theme-without-fonts` instead: + +```js +// .vitepress/theme/index.js +import DefaultTheme from 'vitepress/theme-without-fonts' +import './my-fonts.css' + +export default DefaultTheme +``` + +```css +/* .vitepress/theme/custom.css */ +:root { + --vp-font-family-base: /* normal text font */ + --vp-font-family-mono: /* code font */ +} +``` + +If your font is a local file referenced via `@font-face`, it will be processed as an asset and included under `.vitepress/dist/assets` with hashed filename. To preload this file, use the [transformHead](/reference/site-config#transformhead) build hook: + +```js +// .vitepress/config.js +export default { + transformHead({ assets }) { + // adjust the regex accordingly to match your font + const myFontFile = assets.find(file => /font-name\.\w+\.woff2/) + if (myFontFile) { + return [ + 'link', + { + rel: 'preload', + href: myFontFile, + as: 'font', + type: 'font/woff2', + crossorigin: '' + } + ] + } + } +} +``` + ## Registering Global Components ```js diff --git a/docs/reference/site-config.md b/docs/reference/site-config.md index e04101dd1c0..2b091a3ed1b 100644 --- a/docs/reference/site-config.md +++ b/docs/reference/site-config.md @@ -477,6 +477,8 @@ export default { ```ts interface TransformContext { + page: string // e.g. index.md (relative to srcDir) + assets: string[] // all non-js/css assets as fully resolved public URL siteConfig: SiteConfig siteData: SiteData pageData: PageData diff --git a/package.json b/package.json index 0ebc02a3cae..1f87da92b9e 100644 --- a/package.json +++ b/package.json @@ -21,6 +21,10 @@ "./theme": { "types": "./theme.d.ts", "default": "./dist/client/theme-default/index.js" + }, + "./theme-without-fonts": { + "types": "./theme.d.ts", + "default": "./dist/client/theme-default/without-fonts.js" } }, "bin": { diff --git a/src/client/theme-default/index.ts b/src/client/theme-default/index.ts index 5bb3bb6c633..5eedce8e403 100644 --- a/src/client/theme-default/index.ts +++ b/src/client/theme-default/index.ts @@ -1,34 +1,4 @@ import './styles/fonts.css' -import './styles/vars.css' -import './styles/base.css' -import './styles/utils.css' -import './styles/components/custom-block.css' -import './styles/components/vp-code.css' -import './styles/components/vp-code-group.css' -import './styles/components/vp-doc.css' -import './styles/components/vp-sponsor.css' - -import type { Theme } from 'vitepress' -import VPBadge from './components/VPBadge.vue' -import Layout from './Layout.vue' - -// Note: if we add more optional components here, i.e. components that are not -// used in the theme by default unless the user imports them, make sure to update -// the `lazyDefaultThemeComponentsRE` regex in src/node/build/bundle.ts. -export { default as VPHomeHero } from './components/VPHomeHero.vue' -export { default as VPHomeFeatures } from './components/VPHomeFeatures.vue' -export { default as VPHomeSponsors } from './components/VPHomeSponsors.vue' -export { default as VPDocAsideSponsors } from './components/VPDocAsideSponsors.vue' -export { default as VPTeamPage } from './components/VPTeamPage.vue' -export { default as VPTeamPageTitle } from './components/VPTeamPageTitle.vue' -export { default as VPTeamPageSection } from './components/VPTeamPageSection.vue' -export { default as VPTeamMembers } from './components/VPTeamMembers.vue' - -const theme: Theme = { - Layout, - enhanceApp: ({ app }) => { - app.component('Badge', VPBadge) - } -} +import theme from './without-fonts.js' export default theme diff --git a/src/client/theme-default/without-fonts.ts b/src/client/theme-default/without-fonts.ts new file mode 100644 index 00000000000..5951f9d81af --- /dev/null +++ b/src/client/theme-default/without-fonts.ts @@ -0,0 +1,33 @@ +import './styles/vars.css' +import './styles/base.css' +import './styles/utils.css' +import './styles/components/custom-block.css' +import './styles/components/vp-code.css' +import './styles/components/vp-code-group.css' +import './styles/components/vp-doc.css' +import './styles/components/vp-sponsor.css' + +import type { Theme } from 'vitepress' +import VPBadge from './components/VPBadge.vue' +import Layout from './Layout.vue' + +// Note: if we add more optional components here, i.e. components that are not +// used in the theme by default unless the user imports them, make sure to update +// the `lazyDefaultThemeComponentsRE` regex in src/node/build/bundle.ts. +export { default as VPHomeHero } from './components/VPHomeHero.vue' +export { default as VPHomeFeatures } from './components/VPHomeFeatures.vue' +export { default as VPHomeSponsors } from './components/VPHomeSponsors.vue' +export { default as VPDocAsideSponsors } from './components/VPDocAsideSponsors.vue' +export { default as VPTeamPage } from './components/VPTeamPage.vue' +export { default as VPTeamPageTitle } from './components/VPTeamPageTitle.vue' +export { default as VPTeamPageSection } from './components/VPTeamPageSection.vue' +export { default as VPTeamMembers } from './components/VPTeamMembers.vue' + +const theme: Theme = { + Layout, + enhanceApp: ({ app }) => { + app.component('Badge', VPBadge) + } +} + +export default theme