vitepress-theme-poseidon v0.2.14

Vitepress 博客主题

快速开始

1. 参考 Vitepress 官网 搭建一个基础框架（选择自定义主题）
2. 安装主题 vitepress-theme-poseidon

npm install vitepress-theme-poseidon

3. 使用主题，路径：.vitepress/theme/index.js

import { PoseidonTheme } from "vitepress-theme-poseidon";

export default {
    extends: PoseidonTheme,
};

4. 继承配置，构建文章。路径：.vitepress/config.js

import { defineConfig } from "vitepress";
import { getPages } from 'vitepress-theme-poseidon/pages';
import { baseConfig } from 'vitepress-theme-poseidon/config';

export default defineConfig({
    extends: baseConfig,
    title: "xxx",
    description: "xxxxx",
    themeConfig: {
        pages: await getPages(),
    },
});

Frontmatter

• title：标题
• date：日期
• category：分类
• top：置顶，按数值大小排序
• home：指定首页，默认false
• customPage：自定义页面
• related：是否展示相关文章推荐模块，默认false
• hideComment：是否隐藏评论模块（需要giscus配置），默认 false。
• footer：是否展示页尾，默认true

案例

- title: 这里写标题
- date: 2023-11-11 12:00:00
- category:
  - js
  - vue
- top: 3
- home: false
- customPage: true
- related: true
- hideComment: false
- footer: false

主题配置

导航栏

// 暂未实现三级导航
export default defineConfig({
    themeConfig: {
        nav: [
            {
                text: "一级导航",
                items: [
                    { text: "二级导航", link: "/xxx.html" },
                ]
            },
            { text: "一级导航", link: "/xxx.html" },
        ],
    }
})

分类页面

主题内置 Category 组件，新建一个 md 文件直接使用，例如：categories.md

---
title: 分类
customPage: true
hideComment: true
---

<Category />

配置分类导航，例如跳转到 js 分类下的文章

{ text: "JavaScript", link: "/categories.html?type=js" }

归档页面

主题内置 Archive 组件，新建一个 md 文件直接使用，例如：archive.md

---
title: 归档
customPage: true
hideComment: true
---

<Archive />

评论

Giscus

主题支持 Giscus 评论插件，如何配置请参考文章：。配置示例如下：

export default defineConfig({
    themeConfig: {
        commentConfig: {
            type: 'giscus',
            options: {
                repo: "xxx",
                repoId: "xxxx",
                category: "General",
                categoryId: "xxxxx",
                mapping: "pathname",
                term: "Welcome to component!",
                reactionsEnabled: '1',
                emitMetadata: '0',
                inputPosition: "top",
                lang: "zh-CN",
            }
        },
    }
})

Valine

主题支持 Valine 评论插件，更多配置参考：

export default defineConfig({
    themeConfig: {
        commentConfig: {
            type: 'valine',
            options: {
                appId: 'xxx',
                appKey: 'xxx',
            }
        }
    }
})

搜索

主题使用的是 Algolia DocSearch 搜索插件，如何配置请参考文章：。配置示例如下：

export default defineConfig({
    themeConfig: {
        algoliaConfig: {
            appId: "xxx",
            apiKey: "xxxx",
            indexName: "testName",
        }
    }
})

分页

todo

其他

• logo：站点图标
• startTime：建站时间，用于页尾展示

自定义

插槽

主题的 Layout 组件提供一些插槽，在页面特定的位置放置自定内容。

// .vitepress/theme/index.js
import { PoseidonTheme } from 'vitepress-theme-poseidon';
import MyLayout from './MyLayout.vue';
import './style.css';

export default {
    extends: PoseidonTheme,
    Layout: MyLayout,
}

<!-- .vitepress/theme/MyLayout.vue -->
<script setup>
import { PoseidonTheme } from 'vitepress-theme-poseidon';

const { Layout } = PoseidonTheme
</script>

<template>
    <Layout>
        <!-- 文章页面尾部 -->
        <template #page-bottom><slot name="page-bottom" /></template>
        <!-- 右下角浮动工具栏 -->
        <template #extra-tools><slot name="extra-tools" /></template>
        <!-- 其他待开发... -->
    </Layout>
</template>

主题色

/* .vitepress/theme/style.css */
:root {
    --vp-c-brand: #646cff;
}