Hexo-next主题优化篇

2023-12-28 13:02:16

注：下面说到的主题配置文件和站点配置文件分别在你的博客目录下的themes/next/_config.yml和_config.yml

1. 主题设定

next 集成了4种内置主题，可在主题配置文件中搜索scheme

# Schemes
scheme: Muse
#scheme: Mist
#scheme: Pisces
#scheme: Gemini

想使用那种主题去掉前面的#号即可，可自行尝试更换
每次更改完都需要执行hexo clean，hexo g, hexo s 即可在本地观察效果。

2. 设置语言

在站点配置文件中将language设置成为对应的语言

英文是en
简体中文是zh-CN

3. 设置菜单并添加页面

在主题配置文件中找到menu想添加什么页面去掉相应的注释即可

menu:
  home: / || home
  #about: /about/ || user
  tags: /tags/ || tags
  categories: /categories/ || th
  archives: /archives/ || archive
  #schedule: /schedule/ || calendar
  #sitemap: /sitemap.xml || sitemap
  #commonweal: /404/ || heartbeat

上面去掉哪行的注释就需要添加那个页面,执行下面的命令即可添加页面。

hexo n page tags
hexo n page categorie
hexo n page archives

4. 设置头像

在主题配置文件中搜索Avatar找到如下配置

avatar:
  # 图片的路径 如果是在本地的话 是以主题目录下source开始的 比如我的在themes/next/source/images/head2.jpg  
  url: /images/head2.jpg  
  # If true, the avatar will be dispalyed in circle.
  rounded: true
  # If true, the avatar will be rotated with the cursor.
  rotated: true

5. 添加侧边栏社交链接

在主题配置文件中搜索social找到你需要显示的社交链接,去掉注释,b并修改为你的链接。（#为注释）

social:
  GitHub: https://github.com/sudo-li || fab fa-github
  Gitee: https://gitee.com/sudo-li || fab fa-git
  #GitHub: https://github.com/yourname || github
  #E-Mail: mailto:yourname@gmail.com || envelope
  #Weibo: https://weibo.com/yourname || weibo
  #Google: https://plus.google.com/yourname || google
  #Twitter: https://twitter.com/yourname || twitter
  #FB Page: https://www.facebook.com/yourname || facebook
  #*: https://*.com/yourname || stack-overflow
  #YouTube: https://youtube.com/yourname || youtube
  #Instagram: https://instagram.com/yourname || instagram
  #Skype: skype:yourname?call|chat || skype
  #RSS: /atom.xml || rss

6. 添加友情链接

在主题配置文件中搜索links在Title后面添加你的友情链接

7. 开启文章打赏功能

在主题配置文件中搜索Reward 去掉前面相应的注释然后添加你的二维码路径路径同头像路径一样,是以主题目录下source开始的.

8. 添加fork github

在主题文件夹的layout下的——layout.wig 添加到<div class="headband"></div>这行代码的下面要添加的东西在https://tholman.com/github-corners/

9. 修改文章内连接样式

在/themes/next/source/css/_common/components/post.styl 最后添加如下代码

// 文章内链接文本样式
.post-body p a{
  color: #0593d3;
  border-bottom: none;
  border-bottom: 1px solid #0593d3;
  &:hover {
    color: #fc6423;
    border-bottom: none;
    border-bottom: 1px solid #fc6423;
  }
}

10. 修改文章标签的小图标

在http://www.fontawesome.com.cn/faicons/里找图标把图标的代码添加到 hemes/next/layout/_macro/post.swig下的tag.name 行

11. 添加评论系统

主题配置文件中找到Valine

valine:
  enable: true
  appid: SSB0Uv6SphdWF73z************ # Your leancloud application appid
  appkey: 1wlBhfILAIsNU********** # Your leancloud application appkey

enable 改为true
appid 和 appkey 可在https://www.leancloud.cn/这里获取
点击上面链接前往leancloud注册一个账号，然后随便注册一个应用
在设置中打开应用key，就可以找到appid和appkey，填入配置文件即可。

12. 添加搜索服务

在站点配置文件最后添加如下配置

search:
  path: search.xml
  field: post
  format: html
  limit: 10000

然后在主题配置文件中开启

local_search:
  enable: true

码农公寓