valaxy/docs/pages/guide/config/index.md

8.0 KiB
Raw Blame History

title title_zh-CN categories end
Config 基础配置
config
false

配置说明

Configurations

::: zh-CN 为了便于配置Valaxy 将配置分为了三种。

valaxy.config.ts 是配置的主入口,它包含了一下配置。

  • siteConfig: 站点信息配置,这部分内容面向站点展示且在任何主题也是通用的格式
  • themeConfig: 主题配置,这部分内容仅在特定主题生效
  • runtimeConfig: 运行时的配置(由 Valaxy 自动生成),用户无需配置
  • 其他 Valaxy 通用配置内容(如需要在 Node 端处理的配置 unocss/addons

譬如: :::

::: en To simplify config, Valaxy divided the configuration into 3.

valaxy.config.ts is the main entry of configuration.

  • siteConfig: Site info config. This affects info displayed on the site, and is independent of themes.
  • themeConfig: Theme config. This part is effective only when the specific theme is in use.
  • runtimeConfig: Runtime config (generated by Valaxy). You don't need to modify the config.
  • Other general Valaxy config (e.g., config that's needed for Node)

For example: :::

// valaxy.config.ts
import { defineValaxyConfig } from 'valaxy'
import type { ThemeConfig } from 'valaxy-theme-yun'
import { addonComponents } from 'valaxy-addon-components'
import Inspect from 'vite-plugin-inspect'

const safelist = [
  'i-ri-home-line',
]

export default defineValaxyConfig<ThemeConfig>({
  // site config see site.config.ts or write in siteConfig
  siteConfig: {},

  theme: 'yun',
  themeConfig: {
    banner: {
      enable: true,
      title: '云游君的小站',
    },
  },

  vite: {
    // https://github.com/antfu/vite-plugin-inspect
    // Visit http://localhost:3333/__inspect/ to see the inspector
    plugins: [Inspect()],
  },

  unocss: {
    safelist,
  },

  addons: [
    addonComponents()
  ],
})

站点配置

Site Config

更多详细配置可参见 types/config.ts

::: zh-CN 站点信息配置,这部分内容面向站点展示且在任何主题也是通用的格式。

你也可以将其写在 site.config.ts 中。

譬如:

// site.config.ts
import { defineSiteConfig } from 'valaxy'

export default defineSiteConfig({
  lang: 'zh-CN',
  title: 'Valaxy Theme Yun',
  url: 'https://valaxy.site/',
  author: {
    name: '云游君',
    avatar: 'https://www.yunyoujun.cn/images/avatar.jpg',
  },
  /**
   * 站点图标
   */
  favicon: 'https://www.yunyoujun.cn/favicon.svg',
  /**
   * 副标题
   */
  subtitle: 'All at sea.',
  description: 'Valaxy Theme Yun Preview.',
  social: [
    {
      name: 'RSS',
      link: '/atom.xml',
      icon: 'i-ri-rss-line',
      color: 'orange',
    }
  ],

  sponsor: {
    enable: true,
    methods: [
      {
        name: '支付宝',
        url: 'https://cdn.yunyoujun.cn/img/donate/alipay-qrcode.jpg',
        color: '#00A3EE',
        icon: 'i-ri-alipay-line',
      },
    ],
  },
})

:::

::: en Site info config. This affects info displayed on the site, and is independent of themes.

You can also write it in site.config.ts.

For example:

// site.config.ts
import { defineSiteConfig } from 'valaxy'

export default defineSiteConfig({
  lang: 'zh-CN',
  title: 'Valaxy Theme Yun',
  url: 'https://valaxy.site/',
  author: {
    name: 'Yunyoujun',
    avatar: 'https://www.yunyoujun.cn/images/avatar.jpg',
  },
  /**
   * Site favicon
   */
  favicon: 'https://www.yunyoujun.cn/favicon.svg',
  /**
   * Subtitle
   */
  subtitle: 'All at sea.',
  description: 'Valaxy Theme Yun Preview.',
  social: [
    {
      name: 'RSS',
      link: '/atom.xml',
      icon: 'i-ri-rss-line',
      color: 'orange',
    }
  ],

  sponsor: {
    enable: true,
    methods: [
      {
        name: 'Alipay',
        url: 'https://cdn.yunyoujun.cn/img/donate/alipay-qrcode.jpg',
        color: '#00A3EE',
        icon: 'i-ri-alipay-line',
      },
    ],
  },
})

:::

Default Frontmatter

为所有文章设置默认的 Frontmatter。

譬如:

设置 time_warning: false,则所有文章都不会显示阅读时间警告。

// site.config.ts
import { defineSiteConfig } from 'valaxy'

export default defineSiteConfig({
  /**
   * 默认 Frontmatter
   */
  frontmatter: {
    time_warning: false,
  }
})

社交图标

Social Icons

::: zh-CN

export interface SocialLink {
  /**
   * 社交链接名称
   */
  name: string
  link: string
  /**
   * 图标名称
   * https://icones.js.org/
   */
  icon: string
  color: string
}

示例: :::

::: en

export interface SocialLink {
  /**
   * The title of your link
   */
  name: string
  link: string
  /**
   * Icon name
   * https://icones.js.org/
   */
  icon: string
  color: string
}

Example: :::

// site.config.ts
import { defineSiteConfig } from 'valaxy'

export default defineSiteConfig({
  social: [
    {
      name: 'RSS',
      link: '/atom.xml',
      icon: 'i-ri-rss-line',
      color: 'orange',
    },
    {
      name: 'QQ 群 1050458482',
      link: 'https://qm.qq.com/cgi-bin/qm/qr?k=kZJzggTTCf4SpvEQ8lXWoi5ZjhAx0ILZ&jump_from=webapi',
      icon: 'i-ri-qq-line',
      color: '#12B7F5',
    },
    {
      name: 'GitHub',
      link: 'https://github.com/YunYouJun',
      icon: 'i-ri-github-line',
      color: '#6e5494',
    },
  ]
})

赞助

Sponsor

::: zh-CN

在每篇文章末尾,展示赞助(打赏)信息。

// site.config.ts
import { defineSiteConfig } from 'valaxy'

export default defineSiteConfig({
  sponsor: {
    enable: true,
    methods: [
      {
        name: '支付宝',
        url: 'https://cdn.yunyoujun.cn/img/donate/alipay-qrcode.jpg',
        color: '#00A3EE',
        icon: 'i-ri-alipay-line',
      },
      {
        name: '微信支付',
        url: 'https://cdn.yunyoujun.cn/img/donate/wechatpay-qrcode.jpg',
        color: '#2DC100',
        icon: 'i-ri-wechat-pay-line',
      },
    ],
  },
})

你可以通过 sponsor 属性控制全局是否开启。 :::

::: en

At the end of each post, show sponsor information.

// site.config.ts
import { defineSiteConfig } from 'valaxy'

export default defineSiteConfig({
  sponsor: {
    enable: true,
    methods: [
      {
        name: 'Alipay',
        url: 'https://cdn.yunyoujun.cn/img/donate/alipay-qrcode.jpg',
        color: '#00A3EE',
        icon: 'i-ri-alipay-line',
      },
      {
        name: 'WeChat Pay',
        url: 'https://cdn.yunyoujun.cn/img/donate/wechatpay-qrcode.jpg',
        color: '#2DC100',
        icon: 'i-ri-wechat-pay-line',
      },
    ],
  },
})

You can use the sponsor property to globally toggle if it's shown. :::

interface SponsorOption {
  enable: boolean
  title: string
  methods: {
    name: string
    url: string
    color: string
    icon: string
  }[]
}

::: zh-CN 或为某篇文章的 Front Matter 单独设置: :::

::: en Or you can set for each post using front matter: :::

---
title: xxx
sponsor: false
---

阅读统计

开启阅读统计,将会在每篇文章开头展示阅读统计信息。

需要主题进行适配,即展示 frontmatter 中的 wordCountreadingTime 字段。

  • wordCount:字数统计
  • readingTime:阅读时长(分钟)
    • 可以设置不同语言的阅读速度,默认 cn 为 300 字/分钟,en 为 200 字/分钟。
// site.config.ts
import { defineSiteConfig } from 'valaxy'

export default defineSiteConfig({
  /**
   * 开启阅读统计
   */
  statistics: {
    enable: true,
    readTime: {
      /**
       * 阅读速度
       */
      speed: {
        cn: 300,
        en: 200,
      },
    },
  }
})

主题配置

Theme Config

::: zh-CN 参照 使用主题 及您所使用的主题文档进行配置。 :::

::: en Please refer to Using Themes and the theme you are using to configure it. :::