本文最后更新于 10 months ago，文中所描述的信息可能已发生改变。
基础配置
基础配置不多说，官方文档给的还算详细
拓展配置
这里选几个来说吧
使用 vite-plugin-pwa
在根目录新建vite.config.ts文件并添加以下配置：
ts
import { defineConfig } from 'vite'
import { VitePWA } from 'vite-plugin-pwa'
export default defineConfig({
plugins: [
VitePWA({
mode: 'production',
registerType: 'autoUpdate',
includeAssets: ['favicon.svg', 'safari-pinned-tab.svg'],
manifest: {
id: '/',
start_url: '/',
name: '梦念逍遥のBLOG',
short_name: '梦念逍遥のBLOG',
description: '这是一个很棒的博客',
theme_color: '#0078E7',
icons: [
{
src: 'pwa-144x144.png',
sizes: '144x144',
type: 'image/png'
},
{
src: 'pwa-512x512.png',
sizes: '512x512',
type: 'image/png'
}
],
screenshots: [
{
'src': 'screenshot-pc.jpg',
'sizes': '1920x1080',
'platform': 'pc',
'type': 'image/jpg',
'form_factor': 'wide',
},
{
'src': 'screenshot-mobile.jpg',
'sizes': '1182x1920',
'platform': 'mobile',
'type': 'image/jpg',
'form_factor': 'narrow',
}
]
},
workbox: {
skipWaiting: true,
clientsClaim: true,
globDirectory: 'dist',
cacheId: 'blog-cache',
ignoreURLParametersMatching: [/https:\/\/.*.onmicrosoft.cn\/(.*?)\.(js|css)/],
globPatterns: ["**\/*.{js,css,html,png,jpg,svg,webp,woff,woff2,cur}"],
runtimeCaching: [
{
urlPattern: /https:\/\/.*.onmicrosoft.cn\/(.*?)\.(js|css)/,
handler: 'NetworkOnly',
},
{
urlPattern: /(.*?)\.(jpg|png|webp|svg|cur)/,
handler: 'CacheFirst',
options: {
cacheName: 'blog-image-cache',
expiration: {
maxEntries: 10,
maxAgeSeconds: 60 * 60 * 24 * 365
},
cacheableResponse: {
statuses: [0, 200]
}
}
},
{
urlPattern: /(.*?)\.(woff|woff2|ttf)/,
handler: 'CacheFirst',
options: {
cacheName: 'blog-fonts-cache',
expiration: {
maxEntries: 10,
maxAgeSeconds: 60 * 60 * 24 * 365
},
cacheableResponse: {
statuses: [0, 200]
}
}
},
{
urlPattern: /https:\/\/fonts.googleapis.com\/.*\//,
handler: 'CacheFirst',
options: {
cacheName: 'google-fonts-cache',
expiration: {
maxEntries: 10,
maxAgeSeconds: 60 * 60 * 24 * 365
},
cacheableResponse: {
statuses: [0, 200]
}
}
},
{
urlPattern: /https:\/\/fonts.gstatic.com\/.*\//,
handler: 'CacheFirst',
options: {
cacheName: 'gstatic-fonts-cache',
expiration: {
maxEntries: 10,
maxAgeSeconds: 60 * 60 * 24 * 365
},
cacheableResponse: {
statuses: [0, 200]
}
}
},
],
},
}),
],
})在根目录新建index.html：
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="referrer" content="no-referrer">
<title>梦念逍遥のBLOG</title>
<meta name="description" content="这是一个很棒的博客">
<link rel="icon" href="./favicon.svg">
<link rel="apple-touch-icon" href="./safari-pinned-tab.svg" sizes="180x180">
<meta name="theme-color" content="#0078E7">
</head>
<body>
</body>
</html>在根目录新建setup文件夹并在其中新建main.ts：
ts
// setup/main.ts
import { defineAppSetup } from 'valaxy'
export default defineAppSetup(({ router, isClient }) => {
router.isReady().then(async () => {
if (!isClient)
return
const { registerSW } = await import('virtual:pwa-register')
registerSW({ immediate: true })
})
})在package.json中添加：
json
{
···
"type": "module",
···
}在tsconfig.json中添加：
json
{
···
"types": [
"vite-plugin-pwa/client"
],
···
}使用图标库
valaxy和默认主题的图标库为iconify-json/carbon、@iconify-json/ri、@iconify-json/ant-design以及@iconify-json/simple-icons
如果想使用其它图标，可以在Icônes里选取图标库并安装，安装完成即可直接使用
自定义覆盖主题组件
首先需要安装valaxy-addon-components：
shell
pnpm add valaxy-addon-components在valaxy.config.ts中配置：
ts
import { defineValaxyConfig } from 'valaxy'
import { addonComponents } from 'valaxy-addon-components'
export default defineValaxyConfig({
// site config see site.config.ts
···
addons: [
addonComponents()
],
···
})在博客文件夹中 components 目录下，新建 YunFooter.vue 覆盖你的主题页脚文件。
vue
<template>
<div>页脚内容</div>
</template>也可以继承扩展此前的页脚：
vue
<script lang="ts" setup>
import YunFooter from 'valaxy-theme-yun/components/YunFooter.vue'
</script>
<template>
<YunFooter>
自定义页脚内容
</YunFooter>
</template>
