おお、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 は 2 カラムレイアウトを設計していましたが、私は Yun を使用している間に 3 カラムレイアウトに慣れてしまったため、スタイルを 3 カラムに調整し、幅も適度に大きくしました。
方法も非常に簡単で、レイアウトフォルダ内のいくつかのテンプレートを変更し、グリッドカラムを追加するだけです。
他のページに対応する#
友達のリンクページを移植しようとしたところ、レンダリングされた Markdown 以外のものは何も表示されませんでした。
その後、ドキュメントを見て、次のようなものを見つけました：
Restent のテーマでは、元々<RouterView />しか書かれていなかったため、他のレイアウトをコピーして少し変更し、次のような結果を得ました：
Bulma で友達のリンクコンポーネントを作るのは面倒だったので、Yun のものをそのまま使いましたが、セリフ体のフォントを使わないように少し変更しました。
コンポーネントのスタイルとロジックの変更#
記事の目次#
記事の目次コンポーネントのスタイルは、Restent 自身が書いたもので、後で「あの時のように書くべきではなかった」と言っていました。
私は後でこれを次のように変更しました：
寄付#
最初の寄付コンポーネントでは、Restent が寄付方法を固定していましたが、私はそれをカスタマイズできるようにしました。
<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 を書いて自分で実装しました。今はとても快適です。
新しいコンポーネントの追加#
3 カラムになったので、両側が少し空いてしまったため、数を増やすためにいくつかの不要なコンポーネントを追加しました。
個人的には、目次はサイドバーの一番上に配置すべきだと考えているので、これを右サイドバーの一番上に配置しました。右サイドバーの残りのスペースは、サイト全体の友情リンクで埋めました。
トップバーのスペースには、あまり多くのページナビゲーションリンクを配置することはできませんので、他のページへのリンクを追加するために別のコンポーネントを作成しました。
カラーテーマの切り替え#
私の神よ、Navbar.vueを開くと、私は困惑しました：なぜそんなにたくさんのドキュメントがあるのですか？！よく見ると、Restent がダークモードとライトモードを切り替えるためのコードであることがわかりました。
使えることは使えますが、問題があります：Artalk はシステムのカラーモードに合わせて自身のカラーモードを切り替えるようではないようです。
問題ありません、Valaxy にはisDarkとtoggleDark()というグローバルステートがありますので、わずか数行の JavaScript で素晴らしい切り替えが直接実現できます。
<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>
大体こんな感じですね。後はどうなるか見てみましょう。