我的老天，感謝 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> {{ 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>
差不多也就是這些了，看看之後會怎麼樣吧。