我的老天，感谢 Restent 的馈赠（不是

起因 ​

其实 Yun 主题挺好看的，功能也很丰富。唯一可惜的一点是 PageSpeed Insights 的评分太低了。

Restent 最近又用 Nuxt 自己车了一套博客给自己用，然后他将之前所写的 Valaxy 主题开源了出来。

一开始我为了统一风格，想基于他的这个“半成品”自己写一个 Material You 风格的主题，但由于 Vite 配置文件的一些问题不得不作罢，使用 Bulma 来进行重写。

目前基本上大多数东西都能正常用，但是标签、分类浏览 Restent 当时没有做，我也没有写出来，就先放缓了。

实践 ​

本地引用主题 ​

首先我把他的主题文件夹下载了下来，放在项目根目录下，然后进行了链接：

pnpm install ./valaxy-theme-custom

这样一来这个文件夹应该就可以像 npm 包一样进行使用了。

移除不需要的东西 ​

Restent 使用了 Roboto 和 JetBrains Mono 作为显示字体，但我个人不是很喜欢这两个字体和 Bulma 在一起搭配的效果，于是删了。

<script setup lang="ts">
import { useHead } from '@unhead/vue';
import { onMounted } from 'vue';

useHead({
    link: [
        {
            rel: 'canonical',
            href: 'https://blog.gxres.net'
        },
        {
            rel: 'preconnect',
            href: 'https://i.yecdn.com'
        }
    ]
})

onMounted(async () => {
    const script = document.createElement('script')
    script.async = true
    script.src = 'https://umami.slirv.vip/script.js'
    script.dataset.websiteId = 'a1102895-db17-4356-8d49-355b6fef337e'
    document.head.appendChild(script)

-   await import('@fontsource/roboto/400.css')
-   await import('@fontsource/jetbrains-mono/400.css')
})
</script>

重新排版 ​

原本的主题中，Restent 设计的是双栏布局，而我在使用 Yun 时已经习惯了三栏式布局，于是将样式调整为了三栏，并且适当增大了宽度。

方法也很简单，把 layouts 文件夹中那几个布局模板改下，加一个 Grid column 就好了。

适配其他页面 ​

在我尝试搬友链页面的时候，发现什么东西都没用，只有渲染过的 Markdown。

然后翻了翻文档，看到了这个：

Restent 自己的主题原本是只写了一个 <RouterView /> 在里面的，于是我将其他 layout 随便复制了一个过来改了一下，得到了下面的效果：

因为实在是懒得再用 Bulma 写一个友链组件了，于是直接上了 Yun 的，只是改了一下不让它再去用衬线字体了。

修改组件样式与逻辑 ​

文章目录 ​

文章目录组件里的样式是 Restent 自己写的，他后来也跟我说本来就不该像当时那样写。

我后来自己改成了这样：

捐赠 ​

一开始捐赠组件中的捐赠途径 Restent 写死了，我后来自己改了一下，使得它可以通过 siteConfig 自定义了。

<template>
  <div class="card" v-if="siteConfig.sponsor.enable">
    <div class="card-content">
      <div class="content">
        <p class="text-center">喜欢这篇文章？能不能考虑一下投喂我（x</p>
        <div class="grid grid-cols-4 justify-items-center">
          <a
            target="_blank"
            v-for="methods in siteConfig.sponsor.methods"
            :style="{ backgroundColor: methods.color }"
            class="button is-link"
            :href="methods.url"
          >
            <span :class="methods.icon"></span>&nbsp;{{ methods.name }}
          </a>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { useSiteConfig } from "valaxy";

const siteConfig = useSiteConfig();
</script>

页脚 ​

页脚的话，我加了一个一言和修改说明。因为备案了，所以还得再加一个备案显示。最后的效果是这样的：

返回顶部 ​

我一直觉得此前用 <a href="#" /> 的方式实现返回页面顶部不是特别舒服，因为没有平滑滚动，于是自己写了一点 JavaScript。现在感觉很舒服了。

添加新的组件 ​

由于变成三栏式了，所以两边显得有些空空的，于是瞎写了一堆可有可无的组件加上去充个数。

我个人认为目录应该位于侧栏最顶部，于是正好把这玩意儿放在了右栏的最上方。至于右栏剩下的地方，则通过全站友情链接来充数了。

顶栏的空间没办法放太多页面导航链接，就又糊了一个组件放其他的页面链接。

颜色主题切换 ​

我的老天爷，一打开 Navbar.vue，我人都傻了：怎么一大堆 document 啊？！仔细一看，哦，原来是 Restent 实现深浅色模式切换的代码。

不得不说用是能用，但是有点问题：Artalk 似乎不会随系统切换自己的颜色模式。

没关系，Valaxy 有个全局状态 isDark 和 toggleDark()，短短几行 JS 就可以直接实现很不错的切换了。

<template>
  <button class="navbar-item" @click="toggleDark" aria-label="Switch theme">
    <div class="icon text-xl i-ri-contrast-2-line" />
  </button>
</template>
<script lang="ts" setup>
import { useAppStore } from "valaxy";

const appStore = useAppStore();
const toggleDark = () => appStore.toggleDark();
</script>

差不多也就是这些了，看看之后会怎么样吧。