Hexo博客系列:Next主题
图
Next是Hexo静态博客生成器下的一款博客展示主题样式,该主题相较而言比较好看,功能也比较全,博客网站拥有的功能都有所具备,同时也支持其他功能的扩展,文章使用版本为8.14.2

官网及下载

Next官网,下载方式到最新的Next仓库拉取,然后放到themes下,在配置文件中启用

// 这里是文件夹名字
theme: next

Next主题的所有配置在Next目录下的_config.yml中,更改文件即会生效,不需要重启
如需清除Next冗余文件,下面为Next的必须文件

next
  |--languages
  |--layout
  |--scripts
  |--source
  |--_config.yml
  |--_vendors.yml
  |--package.json

主题选择

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

网站图标

favicon:
  small: https://s1.ax1x.com/2020/11/10/BqTOfA.png
  medium: https://s1.ax1x.com/2020/11/10/BqTOfA.png
  apple_touch_icon: https://s1.ax1x.com/2020/11/10/BqTOfA.png
  safari_pinned_tab: https://s1.ax1x.com/2020/11/10/BqTOfA.png

菜单配置

menu:
  home: / || fa fa-home
  导航: /nav || fa fa-paper-plane
  categories: /categories || fa fa-th
  archives: /archives || fa fa-archive
  作者: /author || fa fa-user

通过命令hexo n page nav创建与路径同名的文件,然后进行配置:

---
title: 标签
date: 2020-11-10 13:57:59
type: "tags"
comments: false
---

Next使用的图标为Font Awesome,可根据喜欢自行选择

侧边头像

# Sidebar Avatar
avatar:
  # Replace the default image and set the url here.
  url: /images/avatar.png
  # If true, the avatar will be displayed in circle.
  rounded: true
  # If true, the avatar will be rotated with the cursor.
  rotated: false

侧边社交

social:
  GitHub: https://github.com/riskfan  || fab fa-github
  Gitee: https://gitee.com/riskfan  || fab fa-github-alt

开启版权

creative_commons:
  license: by-nc-sa
  sidebar: true
  post: false
  language:

浏览进度

默认放在右下角,开启后放在文章目录下

back2top:
  enable: true
  # Back to top in sidebar. 放在作者下
  sidebar: true
  # Scroll percent label in b2t button. 浏览进行百分比
  scrollpercent: true

底部运行时间

footer:
  # Specify the year when the site was setup. If not defined, current year will be used.
  since: 2021

背景彩带

解决页面整体黑白调的问题

canvas_ribbon:
  enable: true
  size: 100 # The width of the ribbon
  alpha: 0.4 # The transparency of the ribbon
  zIndex: -1 # The display level of the ribbon

代码复制功能

代码量过大的时候如果出现了左右滚动条,滑动是复制按钮并没有固定,算个BUG,介意不要开启

copy_button:
    enable: true

异步加载

相同的数据不在重复加载,加快页面加载,页面转换更流畅

# Easily enable fast Ajax navigation on your website.
# For more information: https://github.com/next-theme/pjax
pjax: true

图片放大功能

# FancyBox is a tool that offers a nice and elegant way to add zooming functionality for images.
# For more information: https://fancyapps.com/fancybox/
fancybox: true

导航开启统计

menu_settings:
  icons: true
  badges: true

在进入文章后页面后,导航是没有小点的,这个时候会出现导航右侧空白的情况,不喜欢该风格的情况可以开启导航统计,缓解右侧空白的情况并且导航统计是左右对称的,小点是靠右一丢丢的,与自定义的左侧分类能保持一致的宽度

顶部加载条

pace:
  enable: false
  # All available colors:
  # black | blue | green | orange | pink | purple | red | silver | white | yellow
  color: blue
  # All available themes:
  # big-counter | bounce | barber-shop | center-atom | center-circle | center-radar | center-simple
  # corner-indicator | fill-left | flat-top | flash | loading-bar | mac-osx | material | minimal
  theme: minimal

底部驱动

个人建议还是开启,毕竟开源需要大家维护

footer:
  # Powered by Hexo & NexT
  powered: true

ICP备案展示

footer:
  beian:
    enable: true
    icp: xxxx

文章底部标签图标

# Use icon instead of the symbol # to indicate the tag at the bottom of the post
tag_icon: true

默认使用的是#,开启后就有图标了

图片懒加载

页面滚动到才加载,但是会影响文章侧边导航定位的精确性,有时会因为没有加载图片无法直接到达某个标题

# Vanilla JavaScript plugin for lazyloading images.
# For more information: https://apoorv.pro/lozad.js/demo/
lazyload: true

网页初始化慢问题

有天发现网站刷新后要等很久网页才出来,网上说的都是字体问题,在配置文件中也发现了其字体的配置位置:

font:
  enable: false

  # Uri of fonts host, e.g. https://fonts.googleapis.com (Default).
  host:

根据网上的方法进行了配置,刚开始并没有效果,不知是否缓存问题,之后有了效果

font:
  enable: true

  # Uri of fonts host, e.g. https://fonts.googleapis.com (Default).
  host: //fonts.lug.ustc.edu.cn

本地搜索功能

安装插件:npm install hexo-generator-searchdb,然后在配置文件中开启

local_search:
    enable: true

在点击搜索时发现有网页有闪动问题,使用以下代码解决了开启搜索时的闪动,但是关闭时依然存在

// 搜索样式
.search-active {
  // 防闪动
  padding-right: 7px;
  transition: none;
}

如果对闪动不是很喜欢,可以使用滚动条插件解决,具体在高级篇中有提到

Gitalk评论

在测试了所有支持的评论系统后,发现只有Gitalk的效果最好,简洁无广告

登录Github,在头像功能中以此找到:Settings -> Developer settings -> OAuth Apps -> New OAuth App

图

其中:

  • Application name:为该OAuth application取名,不重复即可
  • Homepage URL:填写网站首页的地址,如:https://fanmore.github.io/
  • Application description:备注信息
  • Authorization callback URL:回调地址,这个很重要,如果网站在本地就写本地地址,如果网站已经部署,就填写部署的网站地址,可随时更改

完成后拿到Client ID,再通过创建拿到Client secrets

图

然后在Next的配置中开启评论,先将评论的方式改为gitalk

# Multiple Comment System Support
comments:
  # Available values: tabs | buttons
  style: tabs
  # Choose a comment system to be displayed by default.
  # Available values: disqus | disqusjs | changyan | livere | gitalk | utterances
  active: gitalk
  # Setting `true` means remembering the comment system selected by the visitor.
  storage: true
  # Lazyload all comment systems.
  lazyload: true
  # Modify texts or order for any naves, here are some examples.
  nav:
    #disqus:
    #  text: Load Disqus
    #  order: -1
    #gitalk:
    #  order: -2

然后配置gitalk

gitalk:
  enable: true
  github_id: fanmore # 你的Github名
  repo: fanmore.github.io # 用于issues的仓库,通常即部署Hexo的仓库
  client_id: xxx
  client_secret: xxx
  admin_user: fanmore # 仓库管理员用户名
  distraction_free_mode: true
  proxy: https://cors-anywhere.azm.workers.dev/https://github.com/login/oauth/access_token
  language: zh-CN # 评论显示语言

配置完成后在评论处登录授权,进行初始化即可使用

图

不蒜子统计

busuanzi_count:
  enable: true
  total_visitors: true
  total_visitors_icon: fa fa-user
  total_views: true
  total_views_icon: fa fa-eye
  post_views: true
  post_views_icon: far fa-eye

会在文章详情页头部加上阅读次数,在网站底部加上总访问人次和总访问量

文章文字间距固定

某些文字间的间距因为页面宽度而增大,手机端尤为严重,是文字的对齐方式造成的,可在配置文件中配置

# Set the text alignment in posts / pages.
text_align:
  # Available values: start | end | left | right | center | justify | justify-all | match-parent
  desktop: left
  mobile: left

全局字体配置

font:
  enable: false

  # Uri of fonts host, e.g. https://fonts.googleapis.com (Default).
  host:

  # Font options:
  # `external: true` will load this font family from `host` above.
  # `family: Times New Roman`. Without any quotes.
  # `size: x.x`. Use `em` as unit. Default: 1 (16px)

  # Global font settings used for all elements inside <body>.
  global:
    external: true
    family: Helvetica # 更改此处
    size:

代码样式

copy_button:
  enable: true
  # Available values: default | flat | mac
  style: mac

source/css/main.styl中加入

figure.highlight {
  box-shadow: 0 10px 10px 0 rgba(0, 0, 0, 0.1);
}