构建属于自己的 curve主题的指南 ​

前言 ​

在开始使用实践之前，你需要注意，自建网站需要一定的相关知识，你可能会遇到一系列的问题，请确保你有独立解决问题的能力。

准备工作 ​

这个curve主题的github仓库地址是:imsyy/vitepress-theme-curve: 🎉 A Simple VitePress Theme | 一个极简的 VitePress 主题,是使用vitepress搭建的.

你可以fork一份到自己的仓库,然后克隆到本地来进行修改.

前期信息,如部署等请参考curve主题文档:分类：主题文档 | 無名小栈,也可以参考这个:Curve 主题部署简述 | 池鱼小栈

主题修改 ​

基础信息修改(网站名称,描述等相关修改) ​

首先在根目录下找到.vitepress\theme\assets\themeConfig.mjs这个文件,在其中有各种信息的配置,

建议你把不需要的信息注释掉即可(使用<!-- -->来进行注释),不要像我一样把这些东西直接删掉了();

在这里可以把title,discription,logo等等基础信息进行置换.具体的信息你可以看注释,高级功能,如评论,音乐播放器,搜索等功能可以先暂时不动.

图片相关修改 ​

找到public\images\logo这个文件夹,在其中你可以看到与网页有关的图片,可以把这些东西全部替换成自己的图片.另外,如果你需要在你的文章中添加图片的话,建议在public\images这个文件夹下再新建文件夹放置图片然后再导入到你的文章中.

友情链接相关修改 ​

在.vitepress\theme\assets\linkData.mjs这里,可以修改友情链接的相关信息,添加友情链接之类的相关东西.接着翻到150行以下,把这些内容都修改为自己的.

"安全中心"页面修改 ​

找到public\redirect.html,将其中的第7行<title>相关内容修改为自己的标题即可.

边角料修改 ​

页脚 ​

找到.vitepress\theme\components\Footer.vue,把主题,订阅等等链接换成自己的,可以把没用的东西删掉.

导航栏 ​

.vitepress\theme\components\Nav.vue,可以把不需要展示的注释掉.

投喂界面修改 ​

• .vitepress\theme\components\RewardBtn.vue,第18行,第38行,可以自定义投喂内容.

• 展示图片可以在themeConfig.mjs修改(308~315行),并建议在public\images\下新建文件夹添加图片.

  js

  {
    // 打赏
    rewardData: {
      enable: true,
      // wx二维码
      wechat: "https://*your_page*/images/payments/wechat-feed.jpg",
      // zfb二维码
      alipay: "https://*your_page*/images/payments/alipay-feed.jpg",
    }
  }

  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  

文章内容修改 ​

你的各类文章应该发布于posts目录下,并且建议按照年份+月份与日记的命名方式,文章统一使用markdown格式,如posts\2024\1010.md.

另外,有一些内置文章,在pages\tags目录下,你可以对这些原来就有的一些内置于其他页面中的文案内容进行修改.

推荐修改(把里面的一些内容换成自己的):

• pages\link.md
• pages\privacy.md

其他的,如pages\cc.md,pages\project.md,这个看心情修改.

"关于本站"页面修改 ​

在.vitepress\theme\views\About.vue目录下.

基础内容修改: ​

把里面的内容换成自己的即可.

高级修改(格式修改): ​

你应该会在<template>下看到如下格式的内容:

<div class="about-content" style="grid-template-columns: 3fr 3fr" >
    <div class="about-item ...">
        ...
    </div>
    
    <div class="about-item ...">
        ...
    </div>
</div>

<div class="about-content" style="grid-template-columns: 1fr 2fr" >
    <div class="about-item ...">
        ...
    </div>
    
    <div class="about-item ...">
        ...
    </div>
</div>

具体可以看mdn的css相关内容:网格 - 学习 Web 开发 | MDN

然后你只需要照着这个文档修改格式就行.

侧边栏内容修改 ​

在.vitepress\theme\components\Aside\Widgets目录下:

• 更改侧边栏"时钟"一栏内容:在.vitepress\theme\assets\themeConfig.mjs的第249行.Hello.vue中17行,20行换成自己的链接.

• 更改倒计时内容:themeConfig.mjs第259~267行,可以更改倒计时内容.

  js

      // 倒计时
      countDown: {
        enable: true,
        // 倒计时日期
        data: {
          name: "开学",
          date: "2026-3-9",
        }
      }

  1
  2
  3
  4
  5
  6
  7
  8
  9
  

• 增加天气:请参考给你的 Curve 主题添加一个天气侧边栏 | 池鱼小栈

(可选)源代码提交方式 ​

因为我选择使用Github Pages来构建界面,我选择的是在网页仓库新建立一个source分支,然后把这个分支的.vitepress编译之后的内容传输到main分支,从而直接完成搭建.

我使用的是一键提交的脚本,你可以进行参考(适用于windows):

运行方式:在根目录创建deploy.ps1,然后在根目录使用

.\deploy.ps1

来运行脚本.deploy.ps1脚本的内容:

$ErrorActionPreference = "Stop"

# Ensure on source branch and up to date
git switch source | Out-Null
git pull

# Install & build
pnpm install
pnpm build

if (-not (Test-Path ".vitepress\dist\index.html")) {
  throw "Build did not produce .vitepress/dist/index.html. Aborting deploy."
}

# Ensure .nojekyll
New-Item -ItemType File -Path ".vitepress\dist\.nojekyll" -Force | Out-Null

# Deploy dist to main
Push-Location ".vitepress\dist"
try {
  if (-not (Test-Path ".git")) {
    git init | Out-Null
  }
  git branch -M main
  git add -A
  git commit -m ("deploy " + (Get-Date -Format "yyyy-MM-dd HH:mm:ss")) | Out-Null

  # Set remote and force push
  git remote remove origin 2>$null
  git remote add origin "https://github.com/Stomatra/stomatra.github.io.git"
  git push -f origin main
}
finally {
  Pop-Location
}

更多的高级操作将会在其他文档中进行解释,如构建评论功能等.