valaxy/index.md at 9e476f491d0f22e0b4cdc3691369fd26a9bda790

15 KiB

Raw Blame History

title

title_zh

配置说明

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: :::

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

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://vite-pwa-org.netlify.app/
    plugins: [VitePWA()],
  },

  unocss: {
    safelist,
  },

  addons: [
    addonComponents()
  ],
})

站点配置

Site Config

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

::: details packages/valaxy/types/config.ts SiteConfig

<<< @/../packages/valaxy/types/config.ts#snippet{ts:line-numbers}

:::

::: 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',
      },
    ],
  },
})

:::

作者信息

更多字段可参考上文类型或直接在编辑器提示中查看。

import { defineSiteConfig } from 'valaxy'

export default defineSiteConfig({
  author: {
    name: '你的名字',
    // 你的头像
    avatar: 'https://xxx',
    intro: '个人简介'
  }
})

Default Frontmatter

::: zh-CN 为所有文章设置默认的 Frontmatter。

譬如：

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

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

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

:::

::: en Set the default Frontmatter for all posts.

For example:

Set time_warning: false so that all articles won't show reading time warnings.

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

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

:::

社交图标

::: 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',
    },
  ]
})

赞助

::: 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 中的 wordCount 和 readingTime 字段。

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,
      },
    },
  }
})

代码块高度限制

Code Height Limit

::: zh-CN 你可以为每篇文章设置代码块高度限制。 :::

::: en You can set the height limit for each article. :::

::: zh-CN 譬如设置 codeHeightLimit: 300，则文章中所有代码块高度都不会超过 300px，并自动折叠。 :::

::: en For example, if you set codeHeightLimit: 300, the height of all code blocks in the article will not exceed 300px and will be automatically collapsed. :::

import { defineSiteConfig } from 'valaxy'

export default defineSiteConfig({
  // ...
  codeHeightLimit: 300,
})

::: zh-CN 你也可以在文章的 Front Matter 中单独设置： :::

::: en You can also set it separately in the Front Matter of the article: :::

---
codeHeightLimit: 300
---

::: zh-CN 示例可参见代码块高度限制。 :::

::: en Example can refer to Code Height Limit. :::

内容加密

Content Encryption

::: zh-CN 首先在 site.config.ts 中开启加密 :::

::: en Firstly, enable encryption in site.config.ts. :::

import { defineSiteConfig } from 'valaxy'

export default defineSiteConfig({
  // ...
  encrypt: {
    enable: true,
  }
})

::: zh-CN

加密整篇文章 :::

::: en

encrypt the entire article :::

::: zh-CN 在文章的 Front Matter 中设置 password： :::

::: en Set password in the Front Matter of the article: :::

---
password: your_password
---

::: zh-CN

加密部分内容 :::

::: en

encrypt partial content :::

::: tip

如果在文章的 Front Matter 中设置了 `password`，文章中的部分加密将被忽略。

If you set `password` in Front Matter, partial encryption will be ignored.

:::

::: zh-CN 将待加密的内容包裹在  中。 :::

::: en Wrap content to be encrypted in . :::

::: zh-CN 示例可参见部分内容加密。 :::

::: en Examples can be found in Partial Content Encryption。 :::

客户端重定向

Client Redirects

interface Redirects {
  // https://router.vuejs.org/guide/essentials/redirect-and-alias.html
  // Whether to use VueRouter, default is true
  useVueRouter?: boolean
  rules?: RedirectRule[]
}
interface RedirectRule {
  // Redirect original route
  from: string | string[]
  // Redirect target route
  to: string
}

::: zh-CN 示例： :::

::: en For example: :::

// site.config.ts
export default defineSiteConfig({
  redirects: {
    useVueRouter: true,
    rules: [
      {
        from: ['/foo', '/bar'],
        to: '/about',
      },
      {
        from: '/v1/about',
        to: '/about',
      },
    ]
  },
})

::: zh-CN /foo, /bar, /v1/about 这些路由会被重定向到 /about。 :::

::: en /foo, /bar, /v1/about these routes will be redirected to /about。 :::

::: zh-CN 你也可以在 Front Matter 中配置： :::

::: en You can also set it in the Front Matter: :::

<!-- pages/posts/redirect.md -->
---
from:
  - /redirect/old1
  - /redirect/old2
---

<!-- pages/posts/redirect.md -->
---
from: /v1/redirect
---

::: zh-CN /redirect/old1, /redirect/old2, /v1/redirect 这些路由会被重定向到 /posts/redirect。 :::

::: en /redirect/old1, /redirect/old2, /v1/redirect these routes will be redirected to /posts/redirect。 :::

::: tip

在 SSG 构建时，如果 useVueRouter 为 false，则会为每一个源路由生成一个 html 文件

When building SSG, if useVueRouter is false, an html file will be generated for each original route

:::

图片预览（Medium Zoom）

Image Preview (Medium Zoom)

::: zh-CN Valaxy 内置了 medium-zoom 进行图片预览，默认关闭。

Medium Zoom Demo

mediumZoom
- enable: 是否开启
- selector: 可自定义传入选择器
- options: 与 options | medium-zoom 一致

譬如开启 Medium Zoom： :::

::: en Valaxy has built-in medium-zoom to preview the pictures, which is disabled by default.

Medium Zoom Demo

mediumZoom
- enable: Set to true to enable it
- selector: Custom CSS selector
- options: Refer to options | medium-zoom

a2bbd86 (docs: update vanillaLazyLoad) :::

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

export default defineSiteConfig({
  mediumZoom: { enable: true }
})

::: zh-CN 除此之外，你也可以单独控制是否在某篇文章中开启。 :::

::: en In addition, you can also enable it in a certain article independently. :::

---
title: Test Medium Zoom
medium_zoom: true
---

懒加载 Vanilla Lazyload

Lazyload Vanilla Lazyload

::: zh-CN

Valaxy 内置了 vanilla-lazyload。

vanillaLazyload 默认不开启。因为 Valaxy 本身会为所有的图片添加 loading="lazy"，它是浏览器的特性，但如果你希望得到更广泛的兼容，你可以手动开启 vanillaLazyload。

:::

::: en

Valaxy has built-in vanilla-lazyload。

vanillaLazyload is disabled by default. Because Valaxy itself will add loading="lazy" to all images, which is a browser feature, but if you want to get more extensive compatibility, you can manually enable it.

:::

export default defineSiteConfig({
  vanillaLazyload: {
    // 默认不开启
    enable: true,
  }
})

主题配置

Theme Config

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

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

扩展配置

更多高阶配置请参见扩展配置。

15 KiB Raw Blame History Unescape Escape

配置说明

Configurations

站点配置

Site Config

作者信息

Default Frontmatter

社交图标

Social Icons

赞助

Sponsor

阅读统计

代码块高度限制

Code Height Limit

内容加密

Content Encryption

客户端重定向

Client Redirects

图片预览（Medium Zoom）

Image Preview (Medium Zoom)

懒加载 Vanilla Lazyload

Lazyload Vanilla Lazyload

更多配置

主题配置

Theme Config

扩展配置

15 KiB

Raw Blame History