diff --git a/docs/reference/site-config.md b/docs/reference/site-config.md index 73fa8953..ee16a0cd 100644 --- a/docs/reference/site-config.md +++ b/docs/reference/site-config.md @@ -155,17 +155,56 @@ export default { Additional elements to render in the `` tag in the page HTML. The user-added tags are rendered before the closing `head` tag, after VitePress tags. +```ts +type HeadConfig = + | [string, Record] + | [string, Record, string] +``` + +#### Example: Adding a favicon + +```ts +export default { + head: [['link', { rel: 'icon', href: '/favicon.ico' }]] +} // put favicon.ico in public directory, if base is set, use /base/favicon.ico + +/* Would render: + +*/ +``` + +#### Example: Adding Google Fonts + ```ts export default { head: [ + [ + 'link', + { rel: 'preconnect', href: 'https://fonts.googleapis.com' } + ], [ 'link', { rel: 'preconnect', href: 'https://fonts.gstatic.com', crossorigin: '' } - // would render: - // - // ], + [ + 'link', + { href: 'https://fonts.googleapis.com/css2?family=Roboto&display=swap', rel: 'stylesheet' } + ] + ] +} + +/* Would render: + + + +*/ +``` + +#### Example: Registering a service worker +```ts +export default { + head: [ [ 'script', { id: 'register-sw' }, @@ -174,24 +213,50 @@ export default { navigator.serviceWorker.register('/sw.js') } })()` - // would render: - // - // ] ] } + +/* Would render: + +*/ ``` +#### Example: Using Google Analytics + ```ts -type HeadConfig = - | [string, Record] - | [string, Record, string] +export default { + head: [ + [ + 'script', + { async: '', src: 'https://www.googletagmanager.com/gtag/js?id=TAG_ID' } + ], + [ + 'script', + {}, + `window.dataLayer = window.dataLayer || []; + function gtag(){dataLayer.push(arguments);} + gtag('js', new Date()); + gtag('config', 'TAG_ID');` + ] + ] +} + +/* Would render: + + +*/ ``` ### lang @@ -239,7 +304,7 @@ Enabling this may require additional configuration on your hosting platform. For - Type: `Record` -Defines custom directory <-> URL mappings. See [Routing: Route Rewrites](../guide/routing#route-rewrites) for more details. +Defines custom directory <-> URL mappings. See [Routing: Route Rewrites](../guide/routing#route-rewrites) for more details. ```ts export default {