Valaxy Static Blog Framework

The Valaxy Addons Gallery provides a centralized view of both official and community-maintained addons.

• Official Addons: Packages maintained within the Valaxy monorepo. You can find detailed guides for these in the Official Addons section.
• Community Addons: Third-party extensions developed by the community to extend Valaxy's functionality.

Valaxy provides a suite of official addons maintained within the monorepo to extend functionality. You can find documentation for each specific addon in the official addon index. These addons cover various features such as search, media integration, and comments.

Available Official Addons:

• valaxy-addon-abbrlink: Abbreviation linking.
• valaxy-addon-algolia: Algolia search integration.
• valaxy-addon-bangumi: Bangumi integration.
• valaxy-addon-components: Component-related features.
• valaxy-addon-feishu: Feishu integration.
• valaxy-addon-girls: Girls integration.
• valaxy-addon-lightgallery: Lightgallery integration.
• valaxy-addon-meting: Meting integration.
• valaxy-addon-twikoo: Twikoo comments integration.
• valaxy-addon-waline: Waline comments integration.

For community-maintained packages, refer to the Addon Gallery.

Valaxy is a next-generation static blogging framework built on Vue and Vite.

Unlike traditional static site generators (SSGs) that treat every page as an independent island (like Astro), Valaxy uses a single-page SSG architecture.

How it works:

1. It generates a separate HTML file for each blog page to ensure SEO and initial load capability.
2. Once a user enters from any entry point, the site activates as a Single Page Application (SPA).
3. When navigating between pages, Valaxy only updates the necessary page content and scripts without a full browser reload, providing a smooth, SPA-like user experience.

This architecture offers a trade-off: while the initial first-screen loading speed might be slightly slower than pure island-based architectures, the experience during page transitions is significantly more fluid.

Valaxy uses Static Site Generation (SSG), meaning components run in a Node.js environment during build time where browser APIs like window, document, and navigator are unavailable.

Hydration mismatches occur when the HTML generated during SSG differs from the HTML rendered in the browser. Common causes include:

• Using browser-only APIs in templates (e.g., {{ window.innerWidth }}).
• Using time or locale-dependent values (e.g., new Date().toLocaleString()).
• Non-standard HTML nesting (e.g., <div> inside <p>).
• Browser extensions modifying the DOM.

To prevent these issues, use the patterns described in the following records.

When developing a Valaxy theme, you should use your theme's name as a prefix for all components. This practice prevents naming collisions with other themes or core Valaxy components.

Example: If your theme is named valaxy-theme-yun, your components should be named using the Yun prefix, such as YunComponent or YunPost.

Valaxy uses a path-based separation approach to organize documentation in different languages. To maintain a bilingual site, follow this directory structure:

• English documentation: Located in /docs/pages/
• Chinese documentation: Located in /docs/pages/zh/

Example mapping:

• English: docs/pages/guide/getting-started.md
• Chinese: docs/pages/zh/guide/getting-started.md

When configuring music resources, props are resolved in the following order (from highest to lowest priority):

1. Component props: Passed directly to the <MetingJs> component in a template.
2. Addon props config: Defined in the addonMeting({ props: { ... } }) configuration.
3. Built-in defaults: The default values provided by MetingJS.