Theme Yun Config

Theme Type ​

Yun theme supports two layout types via themeConfig.type:

  • nimbo (default): Modern layout with top navigation bar + homepage banner animation + full-screen menu on mobile.
  • strato: Classic layout with left sidebar + top navigation bar, similar to traditional blogs.
valaxy.config.ts
ts
import type { ThemeConfig } from 'valaxy-theme-yun'
import { defineValaxyConfig } from 'valaxy'

export default defineValaxyConfig<ThemeConfig>({
  themeConfig: {
    type: 'nimbo', // or 'strato'
  },
})

TIP

strato corresponds to the v1 layout style, nimbo to v2. Future layout variants will be named after different cloud types (e.g., cirro, cumulo, alto).

Colors ​

valaxy.config.ts
ts
import type { ThemeConfig } from 'valaxy-theme-yun'
import { defineValaxyConfig } from 'valaxy'

export default defineValaxyConfig<ThemeConfig>({
  themeConfig: {
    colors: {
      /**
       * Primary color
       * @default '#0078E7'
       */
      primary: '#0078E7',
    },
  },
})

Top navigation bar items.

valaxy.config.ts
ts
import type { ThemeConfig } from 'valaxy-theme-yun'
import { defineValaxyConfig } from 'valaxy'

export default defineValaxyConfig<ThemeConfig>({
  themeConfig: {
    nav: [
      { text: 'Posts', link: '/posts/', icon: 'i-ri-article-line' },
      { text: 'Links', link: '/links/', icon: 'i-ri-link' },
    ],
  },
})

Each NavItem has the following properties:

PropertyTypeDescription
textstringDisplay text (supports i18n key like menu.posts)
linkstringURL
iconstringIcon name, see Icônes
activestringActive route match pattern

Pages ​

Page links displayed below the social links on the homepage sidebar.

valaxy.config.ts
ts
import type { ThemeConfig } from 'valaxy-theme-yun'
import { defineValaxyConfig } from 'valaxy'

export default defineValaxyConfig<ThemeConfig>({
  themeConfig: {
    pages: [
      {
        name: 'Links',
        url: '/links/',
        icon: 'i-ri-link',
        color: 'dodgerblue',
      },
      {
        name: 'Projects',
        url: '/projects',
        icon: 'i-ri-gallery-view',
        color: 'var(--va-c-text)',
      },
    ],
  },
})
PropertyTypeDescription
namestringPage name
urlstringPage URL
iconstringIcon name, see Icônes
colorstringIcon color (CSS value), default var(--va-c-text)

The docs layout renders this navigation on the left. You can provide one sidebar for every document or use path prefixes to define multiple sidebars.

valaxy.config.ts
ts
import type { ThemeConfig } from 'valaxy-theme-yun'
import { defineValaxyConfig } from 'valaxy'

export default defineValaxyConfig<ThemeConfig>({
  themeConfig: {
    sidebar: {
      '/guide/': {
        base: '/guide/',
        items: [
          {
            text: 'Guide',
            items: [
              { text: 'Getting Started', link: 'getting-started' },
              { text: 'Configuration', link: 'config' },
            ],
          },
          {
            text: 'Advanced',
            collapsed: true,
            items: [
              { text: 'Deployment', link: 'deployment' },
            ],
          },
        ],
      },
    },
  },
})

Set layout: docs in a page’s frontmatter to use it. Groups become collapsible when collapsed is present; true starts collapsed and false starts open.

valaxy.config.ts
ts
import type { ThemeConfig } from 'valaxy-theme-yun'
import { defineValaxyConfig } from 'valaxy'

export default defineValaxyConfig<ThemeConfig>({
  themeConfig: {
    footer: {
      since: 2022,

      cloud: {
        enable: true, // Flowing cloud on top of footer
      },

      icon: {
        enable: true,
        name: 'i-ri-heart-fill',
        animated: true,
        color: 'red',
        url: '',
        title: '',
      },

      powered: true, // Show "Powered by Valaxy & valaxy-theme-yun"

      beian: {
        enable: false,
        icp: '', // e.g. '苏ICP备xxxxxxxx号'
        icpLink: 'https://beian.miit.gov.cn/',
        police: '', // Public security registration number
      },
    },
  },
})

Contributors