组件

Valaxy 内置了几个简单的组件。

你可以在写文章或者创作主题时直接使用。

基础组件 ​

布局与渲染 ​

• ValaxyMain.vue: 页面基础布局
• ValaxyMd.vue: Markdown 渲染内容

其他 ​

• AppLink.vue: 根据链接自动判断是否为站内链接，站内链接使用 <router-link/>，站外链接使用 <a target="_blank"></a>。
• ValaxyCopyright.vue: 文章中的版权信息
• ValaxyDecrypt.vue: 文本解密组件
• ValaxyGalleryDecrypt.vue: 图片解密组件
• ValaxyLogo.vue: 带渐变色彩的 Valaxy Logo
• ValaxySvgLogo.vue: Valaxy SVG Logo
• ValaxyPagination.vue: 分页组件
• ValaxyOverlay.vue: 灰色遮罩组件
• ValaxyHamburger.vue: 汉堡按钮

<ValaxyLogo />

辅助组件 ​

内置组件 ​

面向用户，可直接使用

你也可以通过 valaxy-addon-components 扩展公共组件。

国际化组件 <VT /> ​

menu:
  posts: 博客文章

menu:
  posts: Posts

<!-- auto follow locale -->
<VT content="menu.posts" />

扩展公共组件 ​

pnpm add valaxy-addon-components

如：

• CodePen: CodePen 代码片段
• VCLiveTime: 站点建立时间

My Blog Content

<CodePen class="h-300px" name="Margin Collapse" id="WqXGpo" user="YunYouJun" tab="html,result" />

My Blog Content

See the Pen Margin Collapse by YunYouJun (@YunYouJun) on CodePen.

调试组件 ​

<ValaxyDebug /> ​

Valaxy 内置了 <ValaxyDebug /> 调试面板组件，仅在开发模式下可用（生产构建时会被完全移除，零开销）。

该组件会在页面左下角显示一个可折叠的浮动面板，包含以下调试信息：

• Breakpoints：当前视口命中的响应式断点（xs / sm / md / lg / xl / 2xl）
• Route：当前路由信息（path、name、layout、query、params）
• Frontmatter：当前页面的 frontmatter 数据（JSON 格式）
• Config：站点配置摘要和主题配置

使用方式 ​

在你的主题或布局中直接使用即可（无需引入，已全局注册）：

<template>
  <div>
    <!-- 你的页面内容 -->
    <ValaxyDebug />
  </div>
</template>

自定义 ​

更多用法请参见 自定义组件。