晓雨杂记

Oh my god, thanks for the gift from Restent (not)

Background#

Actually, the Yun theme looks pretty good and has a lot of features. The only downside is that the PageSpeed Insights score is too low.

Recently, Restent created his own blog using Nuxt and open-sourced the previously written Valaxy theme.

At first, I wanted to write a Material You style theme based on his "work in progress" to maintain a consistent style. However, due to some issues with the Vite configuration file, I had to give up and rewrite it using Bulma.

Currently, most things are working fine, but Restent didn't implement tag and category browsing at the time, and I haven't added it yet.

Implementation#

Local Theme Import#

First, I downloaded his theme folder and placed it in the project root directory, then linked it using:

pnpm install ./valaxy-theme-custom

This way, the folder can be used like an npm package.

Removing Unnecessary Elements#

Restent used Roboto and JetBrains Mono as the display fonts, but I personally don't like how these two fonts look with Bulma. So I removed them.

<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>

Layout Redesign#

The original theme had a two-column layout designed by Restent, but I was already used to a three-column layout with Yun. So I adjusted the styles to a three-column layout and increased the width slightly.

The method is simple, just modify the layout templates in the layouts folder and add a Grid column.

Adapting Other Pages#

When I tried to move the Friends page, I found that nothing was working except for the rendered Markdown.

Then I looked through the documentation and found this:

Restent's original theme only had a <RouterView /> in it, so I copied another layout and made some modifications, resulting in the following effect:

Because I was too lazy to write another component for the friend links using Bulma, I just used the one from Yun and made some changes to prevent it from using a serif font.

Modifying Component Styles and Logic#

Table of Contents#

The style of the table of contents component was originally written by Restent, but he later told me that it shouldn't have been written that way.

I made my own changes to it:

Donation#

Originally, Restent hardcoded the donation methods in the donation component, but I made some changes so that they can be customized through siteConfig.

<template>
  <div class="card" v-if="siteConfig.sponsor.enable">
    <div class="card-content">
      <div class="content">
        <p class="text-center">Liked this article? Would you consider donating to me (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>

Footer#

For the footer, I added a hitokoto (a random sentence) and modification information. Since I have an ICP license, I also added a display for it. The final result looks like this:

Back to Top#

I always felt that using <a href="#" /> to go back to the top of the page wasn't very smooth because it didn't have smooth scrolling. So I wrote some JavaScript code myself. Now it feels much better.

Adding New Components#

Since it became a three-column layout, the sidebars looked a bit empty, so I randomly wrote some unnecessary components to fill the space.

I personally think the table of contents should be at the top of the sidebar, so I placed it at the top of the right sidebar. As for the remaining space in the right sidebar, I filled it with a list of friend links.

There wasn't much space in the top bar for additional page navigation links, so I added another component for other page links.

Color Theme Switching#

Oh my god, when I opened Navbar.vue, I was dumbfounded: why are there so many document references?! After taking a closer look, I realized that it was Restent's code for implementing dark/light mode switching.

I have to say, it works, but there's a slight issue: Artalk doesn't seem to switch its color mode with the system.

No problem, Valaxy has a global state isDark and toggleDark(), so with just a few lines of JS, I can easily implement a nice toggle.

<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>

That's about it. Let's see how it turns out.