vuepress-theme-hope

王江南2025年5月19日大约 3 分钟

自定义主页

使用vite打包不然会出现无法动态加载js

完全替换，使用default插槽

<template>
  <Layout
    ><template #default>
      <div class="dayday-wrapper">
        <canvas id="canvas"></canvas>
        <div class="hero">
          <h1>DayDay</h1>
          <h2>Study</h2>
          <a
            target="_blank"
            href="https://www.framer.com/marketplace/components/tubes-cursor/"
            >Framer Component</a
          >
        </div>
      </div>
    </template></Layout
  >
</template>

layouts/MyHome.vue 自定义页面

<template>
  <div class="custom-home">
    <h1>欢迎来到我的自定义首页</h1>
    <p>这里完全由我自己控制布局。</p>
  </div>
</template>

<style scoped>
.custom-home {
  text-align: center;
  padding: 100px 20px;
}
</style>

client.ts 导入自定义页面

import MyHome from './layouts/Myhome.vue';

export default defineClientConfig({
  setup() {
    setupRunningTimeFooter(
      new Date('2022-01-01'),
      {
        '/': 'Running time: :day days :hour hours :minute minutes :second seconds',
        '/zh/': '已运行 :day 天 :hour 小时 :minute 分钟 :second 秒',
      },
      true
    );
    setupTransparentNavbar({ type: 'homepage' });
  },
  layouts: {
    MyHome,
  },
});

markdown 使用

---
layout: MyHome

---

模板中的 id="app" 去掉。VuePress 已经有自己的根 #app 了，不要重复

<template>
  <div class="dayday-wrapper">
    <canvas id="canvas"></canvas>
    <div class="hero">
      <h1>DayDay</h1>
      <h2>Study</h2>
      <a
        target="_blank"
        href="https://www.framer.com/marketplace/components/tubes-cursor/"
        >Framer Component</a
      >
    </div>
  </div>
</template>

<script setup>
import { onMounted, onBeforeUnmount } from 'vue';

let app = null;

onMounted(async () => {
  // 动态导入 threejs-components，防止 SSR 报错
  const { default: TubesCursor } = await import(
    'https://cdn.jsdelivr.net/npm/threejs-components@0.0.19/build/cursors/tubes1.min.js'
  );

  const canvas = document.getElementById('canvas');
  app = TubesCursor(canvas, {
    tubes: {
      colors: ['#f967fb', '#53bc28', '#6958d5'],
      lights: {
        intensity: 200,
        colors: ['#83f36e', '#fe8a2e', '#ff008a', '#60aed5'],
      },
    },
  });

  // 点击切换颜色
  const handleClick = () => {
    const colors = randomColors(3);
    const lightsColors = randomColors(4);
    app.tubes.setColors(colors);
    app.tubes.setLightsColors(lightsColors);
  };

  document.body.addEventListener('click', handleClick);

  onBeforeUnmount(() => {
    document.body.removeEventListener('click', handleClick);
    app?.dispose?.();
  });
});

// 生成随机颜色
function randomColors(count) {
  return new Array(count).fill(0).map(
    () =>
      '#' +
      Math.floor(Math.random() * 16777215)
        .toString(16)
        .padStart(6, '0')
  );
}
</script>

<style scoped>
body,
html,
#app {
  margin: 0;
  width: 100%;
  height: 100%;
}
.dayday-wrapper {
  position: relative;
  width: 100%;
  height: 100vh; /* 保证占满屏幕 */
  overflow: hidden;
  font-family: 'Montserrat', serif;
}
body {
  touch-action: none;
}

#app {
  height: 100%;
  font-family: 'Montserrat', serif;
}

#app a {
  text-decoration: none;
  color: #fff;
}

.hero {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

h1,
h2,
p {
  margin: 0;
  padding: 0;
  color: white;
  text-shadow: 0 0 20px rgba(0, 0, 0, 1);
  line-height: 100%;
  user-select: none;
}

h1 {
  font-size: 80px;
  font-weight: 700;
  text-transform: uppercase;
}

h2 {
  font-size: 60px;
  font-weight: 500;
  text-transform: uppercase;
}

#canvas {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;
}
</style>

创建项目

npm init vuepress-theme-hope@latest add [dir]

支持图标

Iconify: https://icon-sets.iconify.design/
Iconfont: https://www.iconfont.cn/
默认使用 Fontawesome: https://fontawesome.com/search?o=r&m=free

github pages

重要

如果你的仓库地址是一个普通的形如 https://github.com/<USERNAME>/<REPO> 的格式，
网站将会被发布到 https://<USERNAME>.github.io/<REPO>/ ，
也就是说，你需要将 base 设置为 "/<REPO>/"

配置

提示

::: important
重要容器。
:::

::: info
信息容器。
:::

::: note
注释容器。
:::

::: tip
提示容器
:::

::: warning
警告容器
:::

::: caution
危险容器
:::

::: details
详情容器
:::

选项卡

::: tabs

@tab 标题 1

<!-- tab 1 内容 -->

@tab 标题 2

<!-- tab 2 内容 -->

<!-- 👇 tab 3 将会被默认激活 -->

@tab:active 标题 3

<!-- tab 3 内容 -->

:::

设置分组

 {
    text: "框架",
    prefix: "zh/frame/",
    children: [
      {
        text: "前端",
        prefix: "front/",
        children: [
          "vuepress-theme-hope/"
        ]
      },
      {
        text: "web",
        prefix: "web/",
        children: [
          "spring/"
        ]
      }
    ]
  },

多个侧边栏

"/zh/reading/demo/":"structure",
"/zh/reading/zootopia/":"structure",

MarkDown

导入文件

配置

import { defineUserConfig } from "vuepress";
import { hopeTheme } from "vuepress-theme-hope";

export default defineUserConfig({
  theme: hopeTheme({
    markdown: {
      include: true,
    },
  }),
});

语法

使用  导入文件。

如果要部分导入文件，你可以指定导入的行数




同时你也可以导入文件区域: