next博客主题个性化配置

发表于 更新于 阅读次数： 本文字数： 1.4k 阅读时长 ≈ 5 分钟

前言

继续之前的博文 这篇博文我会教你如何个性化配置你的next博客主题，不然都个人博客网站了，总要有一点”个人特色”吧，那么废话不多说直接进入正题吧

下面的配置都是基于官方文档:
https://theme-next.js.org/docs/getting-started/

选择一个你喜好的主题样式

next主题有4种样式，这里引用官方文档

Muse → 默认方案，这是 NexT 的初始版本。采用黑白色调，整体外观简洁。
Mist → Muse 的一个更简洁的版本，采用整齐的单列视图。
Pisces → 双栏布局，清新如邻家女儿。
Gemini → 看起来像双鱼座，但有明显的柱状块，带有阴影，使其在视觉上显得更加敏感。

这里我使用的是Gemini，这也是很多人使用的主题样式，相关样式需要打开主题文件夹下的_config.yml 把scheme部分改成你需要的主题样式

1
2
3
4
#scheme: Muse
#scheme: Mist
#scheme: Pisces
scheme: Gemini

让你的侧边栏不那么显眼

修改完成主题样式后本地预览你会发现侧边栏默认在左边，这样注意力就容易被左边分散，所以我更希望侧边栏是右边，这样就不会那么喧宾夺主了，还是打开你的_config.yml 文件,找到sidebar的部分

1
2
3
sidebar:
  # Sidebar position. Available values: left | right
  position: right

这部分也可以设置侧边栏的宽度，也就是width_expanded这部分

1
2
3
sidebar:
  # Applicable to Muse | Mist and mobile of Pisces | Gemini.
  width_expanded: 400

亮出你的大头贴(头像)

头像可以说是你个人博客的一个重要标志，官方文档是配置avatar部分，但是我认为在那里显示头像的话就有一种低人一等的感觉，总感觉哪里怪怪的，所以我修改了favicon部分，也就是网站图标部分，不过要先把头像放在blog/themes/next/source/images/里，下面除了设置头像还设置网站图标这些的

1
2
3
4
5
6
7
8
9
favicon:
  small: /images/logo.png
  medium: /images/logo.png
  apple_touch_icon: /images/logo.png
  safari_pinned_tab: /images/logo.png
  #android_manifest: /manifest.json

# Custom Logo (Warning: Do not support scheme Mist)
custom_logo: /images/logo.png

如果你有社交媒体也可以在配置文件social部分添加:

1
2
3
4
5
6
7
social:
  GitHub: https://github.com/Aidens-fox?tab=repositories
  codeberg: https://codeberg.org/Aidens-fox
  mastodon: https://mastodon.social/@aidens_fox
  bilibili: https://space.bilibili.com/3706983595117100?spm_id_from=333.788.0.0
  odysee: https://odysee.com/@Aidens-fox:e
  Bluesky: https://bsky.app/profile/aidens-fox.bsky.social

设置你的菜单栏

菜单栏也就是首页关于那一部分，默认的只有归档和首页这些，我们可以在主题配置文件_config.yml的menu部分添加你需要的，例如关于，你需要先在回到博客文件夹根目录，然后在终端输入
hexo new page about

然后在博客根目录的source文件夹就可以找到一个叫about的文件夹了，我们使用文本编辑器打开里面的index.md文件，确保上面为:

1
2
3
4
---
title: about
type: "about"
---

然后下面你就可以写一下关于你的介绍了，其他页面也是如此
然后我们再回到主题配置文件_config.yml的menu部分，这里默认有使用图标，我不太喜好有图标，所以我把它清除了，也就是|| fa fa-home这些，还有menu_settings部分关闭

1
2
3
4
5
6
7
8
menu:
   home: /
   about: /about/
   归档: /archives/
   标签: /tags/
   资源: /resource/
   友链: /links/
   RSS: /atom.xml

你的创作内容值得重视

创作内容是至高无上的，我们要重视它，所以我们需要引用一个许可，名叫cc许可，一个互联网上伟大的协议，让创作者说明他们保留哪些权利，以及为了接收者或其他创作者的利益而放弃哪些权利，我们启用需要在主题配置文件_config.yml的creative_commons修改

1
2
3
4
5
6
7
8
9
10
creative_commons:
  # Available values: by | by-nc | by-nc-nd | by-nc-sa | by-nd | by-sa | cc-zero
  license: by-nc-sa
  # Available values: big | small
  size: small
  sidebar: true
  post: true
  # You can set a language value if you prefer a translated version of CC license, e.g. deed.zh
  # CC licenses are available in 39 languages, you can find the specific and correct abbreviation you need on https://creativecommons.org
  language: deed.zh

声明你的博客内容不是ai生成的

这里需要使用next的自定义文件支持，我们需要先在 https://notbyai.fyi/cn 这个网站下载需要的非ai生成图标，下载完成后在博客根目录的source文件夹了新建一个_data 的文件夹，在里面新建sidebar.njk文件，写入下面内容，不过你需要把图片文件放在source文件夹下，为了方便管理我更建议再新建一个img文件夹来存放图片

1
2
3
<div class="cc-license animated" itemprop="sponsor">
  <a href="https://notbyai.fyi/cn/" class="cc-opacity" title="Not By AI → https://notbyai.fyi/cn/" target="_blank"><img width="200" src="img/Produced-By-Human-Not-By-AI-Badge-black.svg" alt="Not By AI"></a>
</div>

保存后回到themes/next/_config.yml 这个文件，在custom_file_path部分添加:

1
2
custom_file_path:
  sidebar: source/_data/sidebar.njk

然后你的侧边栏就有一个非ai生成的标志了

统计你的字数

想要统计你的字数你需要再次回到博客文件夹的根目录安装一个插件，我们打开终端
npm install hexo-word-counter

然后在博客根目录的_config.yml里添加:

1
2
3
4
5
6
7
symbols_count_time:
  symbols: true
  time: true
  total_symbols: true
  total_time: true
  awl: 4
  wpm: 275

之后再回到主题的_config.yml里修改symbols_count_time部分

1
2
3
symbols_count_time:
  separated_meta: true
  item_text_total: true

结尾

个人博客重要的是质量不是华丽的界面，这也是我推荐和使用next的原因，它是如此的低调沉稳，方方正正的，不张扬，可读性也很不错，所以我并没有大改外观，我认为是没必要的，所以只是适当的添加了一些声明什么的，例如非ai生成还有cc许可这些的