私のブログをカスタムテーマで書き直す

~~おお、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>&nbsp;{{ 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>

これでほぼ完了です。これからどうなるか見てみましょう。