DOCSEARCHbyAlgolia
Submit Docs

Valaxy Documentation

website·Indexed 32 days ago

https://valaxy.yyj.moe

A static blog generator featuring support for custom blog elements, built-in and custom icons for code blocks, emoji support, Markdown extensions, LaTeX mathematical formulas, and draft management.

Tokens
2.2K
Snippets
21
Records
23
Agent score
11%

What's inside Valaxy

  1. Implement image lazy loading in Valaxy

    Valaxy implements image lazy loading using a combination of markdown-it-image-figures and vanilla-lazyload. Standard Markdown image syntax is used, and the system handles the lazy loading automatically.
    alt text

  2. Use Emoji shortcodes in Valaxy Markdown

    Valaxy supports emoji shortcodes in Markdown. You can use standard emoji names (e.g., :tada:, :100:) which are based on the markdown-it-emoji data.
    :tada: :100:

  3. Create colored diffs and alerts in code blocks

    Valaxy allows adding visual diffs or status alerts to specific lines within a code block using special comments.

    • Use // [!code --] to mark a line as removed (red).
    • Use // [!code ++] to mark a line as added (green).
    • Use // [!code warning] to mark a line as a warning.
    • Use // [!code error] to mark a line as an error.
    export default {
  data () {
    return {
      msg: 'Removed', // [!code --]
      msg: 'Added',   // [!code ++]
      msg: 'Error',   // [!code error]
      msg: 'Warning'  // [!code warning]
    }
  }
}

  4. Manage draft posts in Valaxy

    Instead of moving draft posts into a specific folder, you can mark them as drafts by adding draft: true to the post's frontmatter. You can then quickly locate all drafts using your editor's global search for the string draft: true, which also preserves the intended publication path.

  5. Create a custom ad board component

    You can implement a custom ad board by creating a Vue component at components/YunAdBoard.vue in your Valaxy blog directory. This allows you to define your own styles and content for the ad board using Vue templates.
    <script setup lang="ts">
// Ad board logic
</script>

<template>
  <YunCard>
    <RouterLink to="/posts/how-to-use-adboard">
      How to use the ad board?
    </RouterLink>
  </YunCard>
</template>

  6. Encrypt content in Valaxy posts

    Valaxy allows you to encrypt specific sections of a post using custom HTML comment markers. Content placed between these markers is encrypted and requires a password to be decrypted on the client side using the Web Crypto API.
    <!-- valaxy-encrypt-start:your-password-here -->
This content is encrypted and will only be visible after entering the correct password.
<!-- valaxy-encrypt-end -->

  7. Render mathematical formulas with KaTeX

    Valaxy supports KaTeX for mathematical expressions.

    • Inline formulas: Wrap the expression in single dollar signs $ ... $.
    • Block formulas: Wrap the expression in double dollar signs $$ ... $$.
    Inline: $E = mc^2$

Block:
$$ x = {-b ± √{b^2-4ac} ⁄ 2a} $$

  8. Add icons to Markdown code blocks in Valaxy

    Valaxy allows adding titles and icons to code blocks using the vitepress-plugin-group-icons system. You can use built-in icons by specifying the filename or language in the code block header. For example, using [pnpm] or [npm] in the language tag will trigger the corresponding built-in icon.
    pnpm install
    npm install

  9. Use custom content containers

    Valaxy provides several built-in custom containers for callouts and organization. These can be further configured via markdownIt settings.
    ::: tip
Tip content
:::

::: warning
Warning content
:::

::: danger
Danger content
:::

::: info
Info content
:::

::: details Click to expand
Collapsible content
:::

  10. Highlight specific lines in code blocks

    You can highlight specific lines in a code block by adding a brace {} containing the line numbers or ranges immediately after the language identifier. To enable line numbers, use the :line-numbers suffix. You can also specify the starting line number using :line-numbers=N.
    ```js{4}
// Highlights line 4
    // Line numbers enabled, highlights line 1
    // Line numbers start from 2, highlights line 1

  11. Group multiple code blocks into tabs

    Use the ::: code-group container to group multiple code blocks together. You can provide a custom title for each block by adding [Title] after the language identifier. Imported snippets can also be used inside code groups.
    ::: code-group

```js [config.js]
const config = { ... }
export default config
    import type { UserConfig } from 'valaxy'
export default config

    <<< @/snippets/snippet.js [Custom Title]

    :::

  12. Implement post internationalization (i18n) in Valaxy

    Valaxy supports content internationalization within posts using custom containers. Wrap language-specific content in ::: zh-CN for Chinese and ::: en for English to display the appropriate version based on the user's locale.

    ::: zh-CN 帖子国际化测试内容 :::

    ::: en Post i18n test content :::