草稿 / 隐藏 / 加密

草稿

在文章的 Frontmatter 中设置 draft: true 时，会将文章添加到 excludePosts 数组中，

draft: true

在调用 usePosts 生成文章列表时，会同时得到 excludePosts 数组，将它添加到解构到 srcExculde 中，即可在构建时直接排除。

.vitepress/config.ts

const { excludePosts } = await usePosts();

export default defineConfig<ThemeConfig>({
  srcExclude: [...excludePosts]
});

隐藏

危险

隐藏文章仅仅在文章列表中隐藏，直接访问 URL 时仍可访问，如果需要彻底隐藏，请设置为草稿

在文章的 Frontmatter 中设置 hidden: true 即可将文章隐藏，隐藏后文章将不再出现在列表中

同时设置 head 避免搜索引擎收录（主题会自动添加）

hidden: true
head:
  - - meta
    - name: robots
      content: noindex, nofollow

通过 usePosts 可以获取到隐藏的文章列表 hiddenPosts，最后在 sitemap 中将这些文章排除

.vitepress/config.ts

const { hiddenPosts } = await usePosts();

export default defineConfig<ThemeConfig>({
  sitemap: {
    hostname: 'https://example.com',
    transformItems: (items) => {
      return items.filter((item) => !hiddenPosts.has(item.url.replace(/\.html$/, '')));
    }
  }
});

加密

危险

加密功能主打一个掩耳盗铃，由于静态博客的特性，文章内容实际已经构建成明文的 HTML、JS 文件，F12 即可获得原文。

如果需要彻底隐藏，请设置为草稿

在 ThemeLayout.vue 中导入 Password 组件以及 usePassword() 函数

.vitepress/theme/ThemeLayout.vue

<template>
  <!-- 未解锁：只渲染密码组件，文章内容不进 DOM -->
  <Password v-if="!verified" />

  <!-- 已解锁：正常渲染 -->
  <Layout v-else>

  </Layout>
</template>

<script lang="ts" setup>
import DefaultTheme from 'vitepress/theme';
import Password from '../../src/components/Password.vue';
import { usePassword } from '../../src/composables/usePassword.ts';

const { Layout } = DefaultTheme;
const { verified } = usePassword();
</script>

接着通过 transformPageData 钩子给 Frontmatter 中的明文密码简单加个密

.vitepress/config.ts

import { hashPassword } from '../src/utils/hashPassword';

export default defineConfig<ThemeConfig>({
  transformPageData(pageData) {
    const { frontmatter } = pageData;
    const { password } = frontmatter;

    if (password) {
      frontmatter.password = hashPassword(String(password));
    }
  }
});

最后在文章的 Frontmatter 中设置 password: 123456 即可开启加密

password: 123456