在 22 年刚创建个人主页的时候，由于我的技术水平不够，只能用一些 wordpress typecho 这种直观的工具，后来因为换域名等等一系列的问题就被搁置了...再后来为了过备案，用图形化工具和 bootstrap 糊了一个，而如今熟练掌握 Vue 和 React 等框架之后，也到了完全重写的时候了，于是就有了这段记录。

<!--more-->

关键词：Vue SSR，Nuxt.js

网页的开发一直在持续哇...本文章会持续跟进更新

最后链接：https://www.grtsinry43.com/

框架选择

首先，对于这种主页类的网站，单纯的 Vue React SPA（单页面应用）肯定是不行的，比如说这里我们使用 pure-admin 模板创建的一个后台系统（Vue3），对于搜索引擎来说不会等待页面完全加载和渲染，而抓到的这些内容无法分析网站的关键词和主题等，导致很难被搜索引擎排名考前，因此我们不得不从历史中汲取经验，从服务端生成静态网页，到了客户端渲染的单页面应用，又回到了服务端渲染

对于个人主页这种比较小的项目，我更喜欢使用 Vue 来完成开发，也就是其对应的 SSR 框架——Nuxt.js

快速上手

由于要使用 NuxtUI，我们便可以使用官方的创建工程的脚手架

bash
1npx nuxi@latest init -t ui [项目名称]

创建好项目之后，我们便可以像正常写 Vue 一样来进行开发啦

前置准备工作

在代码块以及项目名称中，我们选用一个等宽而且适用于代码的字体 JetBrains Mono，于是我们可以在 assets/fonts.css 中这样进行引入

css
1@font-face {
2    font-family: 'JetBrains Mono';
3    src: url('https://cdn.jsdelivr.net/gh/JetBrains/JetBrainsMono/web/woff2/JetBrainsMono-Medium.woff2') format('woff2');
4    font-weight: 500;
5    font-style: normal;
6}
7
8.font-jb-mono {
9    /* 设置fallback防止出现宋体 */
10    font-family: 'JetBrains Mono', 'Courier New', Courier, 'Lucida Sans Typewriter', 'Lucida Console', 'Microsoft YaHei', 'WenQuanYi Micro Hei', monospace;

注意这里要设置好 fallback 字体，因为某些 Windows 系统（雾）默认会回落到宋体，导致中文字体不堪入目

以后当我们需要使用的时候只需要挂上这个类名就好

防止掉头发

经典防止掉头发几件套：assets/global.css

css
1* {
2    margin: 0;
3    padding: 0;
4    box-sizing: border-box;
5}
6
7a {
8    text-decoration: none;
9    color: inherit;
10}

疑难解决方案与创新点

桌面与移动端导航栏适配

为了达到最完美的使用效果，我直接写了 NavBar 和 NavBarMobile 两个组件，通过简单的媒体查询来进行切换

css
1@media (max-width: 800px) {
2  .nav-bar-desktop {
3    display: none;
4  }
5
6  .nav-bar-mobile {
7    display: block;
8  }
9}

对于移动段的 Navbar，我选择了可收起菜单来优化体验

vue
1const toggleMenu = () => {
2  isMenuOpen.value = !isMenuOpen.value
3}
4
5const toggleLocale = () => {
6  locale.value = locale.value === 'en' ? 'zh' : 'en';
7};
8</script>
9
10<template>

深浅色模式的极不优雅解决方案

js
1import {onMounted} from "vue";
2const colorMode = useColorMode();
3
4const toggleTheme = () => {
5  if (colorMode.preference === 'system') {
6    colorMode.preference = colorMode.value === 'dark' ? 'light' : 'dark';
7    buttonState.value = colorMode.preference === 'dark';
8  } else {
9    colorMode.preference = colorMode.preference === 'dark' ? 'light' : 'dark';
10    buttonState.value = colorMode.preference === 'dark';

这里深色模式的实现有点太不优雅了，我发现 NuxtUI 官网确实有一个跟随主题的开关，但是自己实现起来就是很奇怪，对于输出的 colorMode 有两个用的上的属性，一个是 preference 对应偏好主题（light dark system），一个是 value 对应当前主题（light dark），由于偏好能被保存下来，于是选择在切换按钮时改变 preference 的对应的值

当组件被挂载（onMounted），首先根据 value 设置初始的状态，当点击切换时，对于当前是否偏好系统要采取不同的方式来切换，不知道大佬们有没有什么好办法，或者过几天我再看看 Nuxt 源码