Valaxy博客框架配置

文档地址：https://valaxy.site/guide/config/

基础配置

基础配置不多说，官方文档给的还算详细

拓展配置

这里选几个来说吧

使用 vite-plugin-pwa

文档地址：https://vite-pwa-org-zh.netlify.app/deployment/

在根目录新建vite.config.ts文件并添加以下配置：

vite.config.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',
                globPatterns: ["**\/*.{js,css,html,png,jpg,svg,webp,woff,woff2,ttf,cur}"],
                navigateFallbackDenylist: [/\/atom\.(xml|atom|json)/], // 排除rss文件路径
                runtimeCaching: [
                    {
                        urlPattern: /^https:\/\/(cdn|fastly|gcore|testingcf|quantil|originfastly)\.jsdelivr\.net/,
                        handler: 'StaleWhileRevalidate',
                    },
                    {
                        urlPattern: /^https:\/\/unpkg\.com/,
                        handler: 'StaleWhileRevalidate',
                    },
                    {
                        urlPattern: /\.*\.(?:js|css|png|jpg|svg|webp|woff|woff2|ttf|cur)/,
                        handler: 'StaleWhileRevalidate',
                    },
                    {
                        urlPattern: /^https:\/\/fonts\.(googleapis|gstatic)\.com/,
                        handler: 'CacheFirst',
                        options: {
                            cacheName: 'network-fonts-cache',
                            expiration: {
                                maxEntries: 100,
                                maxAgeSeconds: 60 * 60 * 24 * 365
                            },
                            cacheableResponse: {
                                statuses: [0, 200]
                            }
                        }
                    },
                ],
            },
        }),
    ],
})

在根目录新建index.html：

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：

main.ts

// setup/main.ts
import { defineAppSetup } from 'valaxy'
import { registerSW } from 'virtual:pwa-register'

export default defineAppSetup(() =>{
  registerSW({
    immediate: true,
  })
})

在package.json中添加：

package.json

json

{
    ···
    "type": "module", 
    ···
}

在tsconfig.json中添加：

tsconfig.json

json

{
    ···
    "types": [ 
      "vite-plugin-pwa/client"
    ], 
	···
}

使用图标库

valaxy和默认主题的图标库为@iconify-json/ant-design、@iconify-json/logos、@iconify-json/ri、@iconify-json/simple-icons、@iconify-json/vscode-icons

如果想使用其它图标，可以在Icônes里选取图标库并安装，安装完成即可直接使用

自定义覆盖主题组件

文档地址：https://valaxy.site/guide/custom/components

首先需要安装valaxy-addon-components：

pnpm

shell

pnpm add valaxy-addon-components

在valaxy.config.ts中配置：

valaxy.config.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 覆盖你的主题页脚文件。

YunFooter.vue

vue

<template>
  <div>页脚内容</div>
</template>

也可以继承扩展此前的页脚：

YunFooter.vue

vue

<script lang="ts" setup>
import YunFooter from 'valaxy-theme-yun/components/YunFooter.vue'
</script>

<template>
  <YunFooter>
    自定义页脚内容
  </YunFooter>
</template>

Q.E.D.

基础配置 ​

拓展配置 ​

使用 vite-plugin-pwa ​

使用图标库 ​

自定义覆盖主题组件 ​

基础配置

拓展配置

使用 vite-plugin-pwa

使用图标库

自定义覆盖主题组件