hexo-NexT主题的美化

---

title: NexT主题的美化
date: 2022-09-02 23:30:46
tags: 杂谈

上一篇讲到如何使用hexo搭建自己的博客，这一篇记录一下怎么一步步的美化，后面如果没有什么大的改动的话，美化的东西就在这一篇里面写了。过程中参考了B站UPMackxin的视频，感谢提供的帮助。除此之外也可以直接参考NexT的官方文档，里面对一些基本都参数的设置都给出了说明，文档在这，本篇的大部分内容可以算作这个文档的翻译，如果英语好直接看文档就可以了。。。

增加菜单栏

第一次使用Next主题的时候，主页上空空荡荡的非常丑。但是实际上很多东西作者已经给我们写好了，我们所需要的就是在"设置"里打开。这里说两个设置文件：第一个是根目录里面的_config文件，总管整个网页，比如使用的主题，主人信息等。第二个在theme/next文件夹里面的_config文件，这个文件则是所有主题相关的设置也是我们最常用到的设置。

那我们想要增加菜单栏目的话只需要打开主题级的config文件，找到menu字段 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VsEjczGE-1667875106049)(https://img1.imgtp.com/2022/09/02/e2bAwqP2.png)]

把想要添加到菜单栏的项目选上就好了，然后重新部署一下看效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Xb2ib9id-1667875106050)(https://img1.imgtp.com/2022/09/02/pxTyTBf5.png)]

现在已经成功的把这些菜单栏目显示出来了，但是还不能用，点进去什么东西都没有，还需要进行下面一步操作，这里以Tags为例

命令行输入：

hexo n page tags

在source目录中就会出现一个tags文件夹，打开其中的index.md，修改title属性为你想要起的名字如：标签等，在下面添加

type: "tags"

的字段，重新部署，就可以正常使用tags啦（如我这里已经有标签为“杂谈”的博客），就会显示为：

其他菜单栏同理~

设置头像

打开主题级的配置文件，找到avatar字段，在url后面填写头像的地址，本地的（博客文件夹里）或者网址都可以，下面可以设置是否圆角和旋转，设置好之后重新部署

社交链接

打开主题级的配置文件，找到social字段，按照需求启用即可

设置文章内代码样式

打开主题级的配置文件，找到social字段。

在这个网址里面可以找到所有可用样式，选择好后按说明填好就可以了，如图

设置博客的图标Favicon

找一张.ico格式的图标,或者去别的网站下载或者制作，并将图标名称改为favicon.ico，然后把图标放在/themes/next/source/images里，并且修改主题配置文件：

favicon:
  small: /images/favicon.ico
  medium: /images/favicon.ico

添加Github或Gitee贡献墙

总是想在博客上添加一个贡献墙时刻提醒自己多Commit（大概有用吧。。）这里使用小冰老师的githubcalendar插件，使用方法：使用命令行安装：

npm i hexo-githubcalendar --save

然后在博客的conifg文件，注意不是主题的config里面添加

githubcalendar:
  enable: true
  priority: 0
  enable_page: /
  user: YUvUY
  layout:
    type: class
    name: main-inner
    index: 0
  githubcalendar_html: '<div class="post-block animated fadeIn" style="width:100%;height:auto;padding:40px 10px 10px 10px;"><div id="github_loading" style="height:100%;display: flex;align-items: center;justify-content: center;"><svg style="height:50px" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"  viewBox="0 0 50 50" style="enable-background:new 0 0 50 50" xml:space="preserve"><path fill="#d0d0d0" d="M25.251,6.461c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615V6.461z" transform="rotate(275.098 25 25)"><animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0 25 25" to="360 25 25" dur="0.6s" repeatCount="indefinite"></animateTransform></path></svg></div><div id="github_container"></div></div><footer class="post-footer"><div class="post-eof"></div></footer>'
  pc_minheight: 280px
  mobile_minheight: 0px
  color: "['#ebedf0', '#f1f8ff', '#dbedff', '#c8e1ff', '#79b8ff', '#2188ff', '#0366d6', '#005cc5', '#044289', '#032f62', '#05264c']"
  api: https://python-github-calendar-api.vercel.app/api
  # api: https://python-gitee-calendar-api.vercel.app/api
  calendar_js: https://cdn.jsdelivr.net/gh/Zfour/hexo-github-calendar@1.21/hexo_githubcalendar.js
  plus_style: ""

生成部署即可。

如果需要修改颜色就在color里面改就好了。

给hexo-NexT主题添加背景图片

原生的next主题的背景就是白色的，即便添加了动效也比较单调，其实我们可以自己设置想要的背景图片

1. 首先找到一张自己喜欢的背景放在\themes\hexo-theme-next\source\images路径下面

2. 在\themes\hexo-theme-next\source\css目录中创建空白的style.styl文件

3. 打开style.styl，在里面添加

   body { 
   background: url(/images/bkg.jpg);
   background-repeat: no-repeat;// 设定背景图片非重复填充
   background-attachment: fixed;// 设置背景图片不随页面滚动
   background-position: 50% 50%;// 设置背景图片位置
   background-size: cover//
   }
   
   

4. 打开\themes\hexo-theme-next\source\css\main.styl 添加一行

   @import "_custom/style.styl"
   

5. 重新构建和部署即可