Oh my goodness, thanks for the gift, Restent (not really)
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 create a Material You style theme based on his "work in progress" theme 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 root directory of my project. Then, I 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 didn't like how they looked 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, but I was already used to a three-column layout with Yun. So, I adjusted the styles to make it a three-column layout and increased the width slightly.
The method was simple, I just modified the layout templates in the layouts folder and added a grid column.
Adapting Other Pages#
When I tried to move the friend links page, I realized that nothing was working except for rendered Markdown.
Then, I looked through the documentation and found this:
Restent's original theme only had a <RouterView /> inside it, so I copied another layout and made some changes. Here's the result:
Because I was too lazy to write another friend links component 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 admitted that it shouldn't have been done that way.
I made my own changes to it:
Donation#
Initially, the donation component had the donation methods hardcoded by Restent. 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">Like this article? 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> {{ 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 random quote and modification information. Since I have an ICP license, I also added a display for it. The final result looks like this:
Scroll to Top#
I always felt that using <a href="#" /> to scroll to the top of the page wasn't very smooth because it didn't have smooth scrolling. So, I wrote a bit of JavaScript to improve it. 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 that 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 site-wide 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 goodness, 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 and light mode switching.
I have to say, it works, but there's a small issue: Artalk doesn't seem to switch its color mode with the system.
No worries, Valaxy has a global state isDark and toggleDark() function, so with just a few lines of JS, I was able to 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.