diff --git a/theme/src/node/config/index.ts b/theme/src/node/config/index.ts index 293664e9..9a2075ce 100644 --- a/theme/src/node/config/index.ts +++ b/theme/src/node/config/index.ts @@ -2,7 +2,6 @@ export * from './extendsBundlerOptions.js' export * from './resolveAlias.js' export * from './resolveLocaleOptions.js' export * from './resolveNotesOptions.js' -export * from './resolvePageHead.js' export * from './resolveProvideData.js' export * from './resolveSearchOptions.js' diff --git a/theme/src/node/config/resolvePageHead.ts b/theme/src/node/config/resolvePageHead.ts deleted file mode 100644 index 3d18a757..00000000 --- a/theme/src/node/config/resolvePageHead.ts +++ /dev/null @@ -1,30 +0,0 @@ -import type { Page } from 'vuepress' -import type { PlumeThemeLocaleOptions } from '../../shared/index.js' - -export function resolvePageHead(page: Page, localeOptions: PlumeThemeLocaleOptions) { - page.frontmatter.head ??= [] - if (localeOptions.appearance ?? true) { - const appearance = typeof localeOptions.appearance === 'string' - ? localeOptions.appearance - : 'auto' - - page.frontmatter.head.push([ - 'script', - { id: 'check-dark-mode' }, - appearance === 'force-dark' - ? `document.documentElement.dataset.theme = 'dark'` - : `;(function () { - const um= localStorage.getItem('vuepress-theme-appearance') || '${appearance}'; - const sm = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches; - const isDark = um === 'dark' || (um !== 'light' && sm); - document.documentElement.dataset.theme = isDark ? 'dark' : 'light'; - })();`.replace(/^\s+|\s+$/gm, '').replace(/\n/g, ''), - ]) - } - - page.frontmatter.head?.push([ - 'script', - { id: 'check-mac-os' }, - `document.documentElement.classList.toggle('mac', /Mac|iPhone|iPod|iPad/i.test(navigator.platform))`, - ]) -} diff --git a/theme/src/node/config/templateBuildRenderer.ts b/theme/src/node/config/templateBuildRenderer.ts index 53befb62..5483b369 100644 --- a/theme/src/node/config/templateBuildRenderer.ts +++ b/theme/src/node/config/templateBuildRenderer.ts @@ -1,11 +1,36 @@ +import type { PlumeThemeLocaleOptions } from '../../shared/index.js' import { templateRenderer, type TemplateRendererContext } from 'vuepress/utils' import { getThemePackage } from '../utils/index.js' -export function templateBuildRenderer(template: string, context: TemplateRendererContext) { +export function templateBuildRenderer( + template: string, + context: TemplateRendererContext, + options: PlumeThemeLocaleOptions, +) { const pkg = getThemePackage() template = template .replace('{{ themeVersion }}', pkg.version || '') .replace(/^\s+|\s+$/gm, '') .replace(/\n/g, '') + + if (options.appearance ?? true) { + const appearance = typeof options.appearance === 'string' + ? options.appearance + : 'auto' + const script = appearance === 'force-dark' + ? `document.documentElement.dataset.theme = 'dark'` + : `;(function () { + const um= localStorage.getItem('vuepress-theme-appearance') || '${appearance}'; + const sm = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches; + const isDark = um === 'dark' || (um !== 'light' && sm); + document.documentElement.dataset.theme = isDark ? 'dark' : 'light'; + })();`.replace(/^\s+|\s+$/gm, '').replace(/\n/g, '') + + template = template + .replace('', ``) + } + else { + template = template.replace('', '') + } return templateRenderer(template, context) } diff --git a/theme/src/node/theme.ts b/theme/src/node/theme.ts index c1d9b7b0..16130a20 100644 --- a/theme/src/node/theme.ts +++ b/theme/src/node/theme.ts @@ -2,7 +2,7 @@ import type { Page, Theme } from 'vuepress/core' import type { PlumeThemeOptions, PlumeThemePageData } from '../shared/index.js' import { sleep } from '@pengzhanbo/utils' import { generateAutoFrontmatter, initAutoFrontmatter, watchAutoFrontmatter } from './autoFrontmatter/index.js' -import { extendsBundlerOptions, resolveAlias, resolvePageHead, resolveProvideData, resolveThemeOptions, templateBuildRenderer } from './config/index.js' +import { extendsBundlerOptions, resolveAlias, resolveProvideData, resolveThemeOptions, templateBuildRenderer } from './config/index.js' import { getThemeConfig, initConfigLoader, waitForConfigLoaded, watchConfigFile } from './loadConfig/index.js' import { getPlugins } from './plugins/index.js' import { prepareData, watchPrepare } from './prepare/index.js' @@ -37,7 +37,8 @@ export function plumeTheme(options: PlumeThemeOptions = {}): Theme { extendsBundlerOptions, - templateBuildRenderer, + templateBuildRenderer: (template, context) => + templateBuildRenderer(template, context, getThemeConfig().localeOptions), extendsMarkdown: async (_, app) => { const { autoFrontmatter, localeOptions } = await waitForConfigLoaded() @@ -53,7 +54,6 @@ export function plumeTheme(options: PlumeThemeOptions = {}): Theme { extendsPage: async (page) => { const { localeOptions } = getThemeConfig() extendsPageData(page as Page, localeOptions) - resolvePageHead(page, localeOptions) }, onInitialized: async (app) => { diff --git a/theme/templates/build.html b/theme/templates/build.html index 29e105a3..0f2d5060 100644 --- a/theme/templates/build.html +++ b/theme/templates/build.html @@ -5,6 +5,8 @@ + +