vuepress-theme-hope主题构建心得

Because2025年3月25日大约 1 分钟

第一次构建：

快捷地址：https://theme-hope.vuejs.press/zh/get-started/
执行：bash npm init vuepress-theme-hope@latest my-docs以创建模板

需要自定义的配置文件

.vuepress下的ts文件。

图标来源（不建议商用，版权问题）

默认提供商：https://icon-sets.iconify.design/
默认集合：fa6-solid
快捷链接：https://icon-sets.iconify.design/fa6-solid/?keyword=fa6-solid
若使用其他集合：举例：hugeicons:advertisement

自己用的图床、图片压缩服务

图片压缩：https://docsmall.com/image-compress
图床：https://picui.cn/
备用图床：https://imgse.com/

侧边栏顺序控制：

在theme.ts文件中，修改代码，示例：

  // 侧边栏
  sidebar,
  sidebarSorter: [
    "readme",         // README 优先
    "date-desc",         // 日期新的在前
    "title",      // 标题字母序
    "filename"           
  ],
  // 页脚
  footer: "Because的主页",
  displayFooter: true,

如何将html转为适用于vuepress框架页面？

将主要的结点，写入md文件，因为markdown支持解析html语法；
此外，css代码也可以随着html标签一起写入md;
对于js代码，创建/.vuepress/client.ts文件，在访问特定界面的时候插入js代码。示例：

import { defineClientConfig } from '@vuepress/client'

export default defineClientConfig({
  enhance({app, router }) {
    router.afterEach((to) => {
      // 仅在访问 /docs.html 时注入脚本
      if (to.path === '/docs.html') {
        app.mixin({
          mounted() {
        // 创建脚本元素
        const script = document.createElement('script')
        
        // 注入搜索和主题切换逻辑
        script.textContent = `
  const observer = new MutationObserver((mutations) => {
        const searchBox = document.getElementById('searchDocs');
        const docsGrid = document.getElementById('docsGrid');
        const docCards = docsGrid.querySelectorAll('.doc-card');
        searchBox.addEventListener('input', function() {
          const searchTerm = searchBox.value.toLowerCase().trim();
          docCards.forEach(card => {
            const title = card.querySelector('h3').textContent.toLowerCase();
            const description = card.querySelector('p').textContent.toLowerCase();
            const tags = card.getAttribute('data-tags').toLowerCase();
            if (title.includes(searchTerm) || description.includes(searchTerm) || tags.includes(searchTerm)) {
              card.style.display = 'block';
            } else {
              card.style.display = 'none';
            }
          });
        });
      });
observer.observe(document.body, {
    childList: true,
    subtree: true
  });
        `;

        // 注入到页面底部
        document.body.appendChild(script);
      }})}
    })
  }
})

贡献者

Because66666