Theme Yun

TIP

Type definitions: valaxy-theme-yun/types/index.d.ts

Quick Start ​

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

export default defineValaxyConfig<ThemeConfig>({
  theme: 'yun',
  themeConfig: {
    // ...
  },
})

You can also extract the theme config into a separate theme.config.ts file:

theme.config.ts
ts
import { defineThemeConfig } from 'valaxy-theme-yun'

export default defineThemeConfig({
  // ...
})

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

The homepage banner with staggered text animation.

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

export default defineValaxyConfig<ThemeConfig>({
  themeConfig: {
    banner: {
      enable: true,
      title: 'My Blog',
      // Split title manually
      // title: ['Hello', 'World'],
      // i18n support
      // title: { en: ['Hello', 'World'], 'zh-CN': '你好世界' },

      cloud: {
        enable: true, // Flowing cloud animation below banner
      },

      // Custom CSS class for site name
      siteNameClass: '',
      // Animation duration (nimbo only)
      duration: 500,
    },
  },
})

To change the cloud color, override the CSS variable --yun-c-cloud:

css
:root {
  --yun-c-cloud: red;
}

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)
valaxy.config.ts
ts
import type { ThemeConfig } from 'valaxy-theme-yun'
import { defineValaxyConfig } from 'valaxy'

export default defineValaxyConfig<ThemeConfig>({
  themeConfig: {
    sidebar: {
      // sidebar config
    },
  },
})
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
      },
    },
  },
})

Background Image ​

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

export default defineValaxyConfig<ThemeConfig>({
  themeConfig: {
    bg_image: {
      enable: true,
      url: '/images/bg.jpg',
      dark: '/images/bg-dark.jpg', // Dark mode
      opacity: 1,
    },
  },
})

You can also override via CSS variables:

css
:root {
  --yun-bg-img: url("/images/bg.jpg");
  --yun-sidebar-bg-img: url("/images/sidebar-bg.jpg");
}

Notice ​

Display an announcement banner.

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

export default defineValaxyConfig<ThemeConfig>({
  themeConfig: {
    notice: {
      enable: true,
      hideInPages: false, // Whether to hide in /pages/[page]
      content: 'Welcome to my blog!',
    },
  },
})

Say ​

Random quote/sentence display.

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

export default defineValaxyConfig<ThemeConfig>({
  themeConfig: {
    say: {
      enable: true,
      api: '', // Custom API URL or local JSON path in public/
      hitokoto: {
        enable: true,
        api: 'https://v1.hitokoto.cn',
      },
    },
  },
})

Fireworks ​

Click fireworks effect powered by @explosions/fireworks.

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

export default defineValaxyConfig<ThemeConfig>({
  themeConfig: {
    fireworks: {
      enable: true,
      colors: ['#66A7DD', '#3E83E1', '#214EC2'],
    },
  },
})

Post Card Types ​

Custom post type badges with icon and color.

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

export default defineValaxyConfig<ThemeConfig>({
  themeConfig: {
    types: {
      link: {
        color: '#1890ff',
        icon: 'i-ri-link',
      },
      bilibili: {
        color: '#FF8EB3',
        icon: 'i-ri-bilibili-line',
      },
    },
  },
})

Then set type in post frontmatter:

md
---
title: My Video
type: bilibili
url: https://www.bilibili.com/video/xxx
---

Custom navigation icon on the far right.

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

export default defineValaxyConfig<ThemeConfig>({
  themeConfig: {
    menu: {
      custom: {
        title: 'Menu',
        url: '/',
        icon: 'i-ri-menu-line',
      },
    },
  },
})

Add an "Edit this page" link to posts.

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

export default defineValaxyConfig<ThemeConfig>({
  themeConfig: {
    editLink: {
      pattern: 'https://github.com/user/repo/edit/main/:path',
      text: 'Edit this page on GitHub',
    },
  },
})

Outline Title ​

Table of contents heading text.

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

export default defineValaxyConfig<ThemeConfig>({
  themeConfig: {
    /**
     * @default 'On this page'
     */
    outlineTitle: 'On this page',
  },
})

Create pages/links/index.md:

md
---
title: My Friends
links:
  - url: https://www.yunyoujun.cn
    avatar: https://www.yunyoujun.cn/images/avatar.jpg
    name: YunYouJun
    blog: YunYouJun's Blog
    desc: Hope to be an interesting person.
    color: "#0078e7"
# Or use a JSON URL
# links: https://friends.example.com/links.json
random: true
---

<YunLinks :links="frontmatter.links" :random="frontmatter.random" />

Styles ​

Override theme styles by creating styles/index.ts:

styles/index.ts
ts
import './vars.scss'
styles/vars.scss
scss
:root {
  --yun-bg-img: url("https://example.com/bg.jpg");
  --yun-sidebar-bg-img: url("https://example.com/sidebar.jpg");
  --yun-c-cloud: pink;
}

Contributors