1487 字
7 分钟
Next 安装指南
2021-12-14
建站
Hexo

Next 1 设置头像#

准备工作#

首先准备一张你的头像图片，格式无所谓，官方是支持 gif 动图的，个人推荐先把突破裁剪成正方形。

我这里准备的就是一张 png 格式的正方形图片，作为我的头像。

将图片上传到你的项目中 source/images，也可以放在 theme/next/source/images。

配置文件#

打开，并修改 next 主题的配置文件：

Terminal window
vim theme/next/_config.yml

可以参考我的配置：

# Sidebar Avatar
avatar:
  # Replace the default image and set the url here.
  url: /images/avatar.png #/images/avatar.gif
  # If true, the avatar will be displayed in circle.
  rounded: true
  # If true, the avatar will be rotated with the cursor.
  rotated: true
参数详细
url图像的路径
roundedtrue:让头像显示在一个圆形空间中
rotatedtrue:鼠标点在图像上会转

最终效果展示：

Next-设置头像.png

Next 2 版权声明#

前言#

在 next 中，是包含有版权声明的内容的，只是默认不展示，需要我们进行额外配置。

配置文件#

配置文件方面，可以参考我的配置，并没有太多内容：

# Creative Commons 4.0 International License.
# See: https://creativecommons.org/about/cclicenses/
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: big
  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:
参数详细
license版权声明，一般就是默认1
size图标大小
sidebartrue:在侧边栏中显示
posttrue:在文章中显示

效果展示#

在侧边栏中的版权声明：

Next-侧边栏-版权声明.png

在文章末尾的版权声明：

Next-文章-版权声明.png

Next 3 菜单栏#

在目前版本中，菜单栏是默认没有的，我们需要在 Next 主题的配置文件中，对菜单栏进行配置。

配置文件#

老样子，先贴上我对菜单栏的配置：

# Usage: `Key: /link/ || icon`
# Key is the name of menu item. If the translation for this item is available, the translated text will be loaded, otherwise the Key name will be used. Key is case-sensitive.
# Value before `||` delimiter is the target link, value after `||` delimiter is the name of Font Awesome icon.
# External url should start with http:// or https://
menu:
  home: / || fa fa-home # 首页
  about: /about/ || fa fa-user # 关于
  tags: /tags/ || fa fa-tags # 标签
  categories: /categories/ || fa fa-th  # 分类
  archives: /archives/ || fa fa-archive # 归档
  #schedule: /schedule/ || fa fa-calendar
  #sitemap: /sitemap.xml || fa fa-sitemap
  #commonweal: /404/ || fa fa-heartbeat

具体的含义我就不多赘述了，一看就能懂了，也不需要将 home 改成首页，新版的 Next 会自动根据系统语言，修改这些项。

菜单栏中网页点击出现 404#

在默认状态下，hexo 并不会为你生成关于、标签以及分类页面，你需要自行创建：

Terminal window
cd hexo
hexo n page "about"
hexo n page "tags"
hexo n page "categories"

生成完成后，你还需要分别对 tags 以及 categories 进行参数配置：

Terminal window
vim source/tags/index.md

你需要在文件头部信息中，增加 type 项，并将 tags 以及 categories 的 type 项参数，分别修改为 tags 和 categories。

---
title: tags
date: 2021-12-11 15:03:08
type: tags
---

到这里，再使用 hexo 生成静态文件后，就能看到对应的页面了：

Terminal window
hexo g

效果展示#

超 Nice 的！！！

Next-标签页面.png

Next 4 个人链接#

前言#

Next 主题提供了两种不同的个人链接方式，分别是 social 和 links。

这里我将把两种个人链接方式放在一起讲。

social#

老样子，先给出我对 social 块的配置：

# Social Links
# Usage: `Key: permalink || icon`
# Key is the link label showing to end users.
# Value before `||` delimiter is the target permalink, value after `||` delimiter is the name of Font Awesome icon.
social:
  #GitHub: https://github.com/yourname || fab fa-github
  #E-Mail: mailto:yourname@gmail.com || fa fa-envelope
  E-Mail: mailto:whitelot@163.com || fa fa-envelope
  #Weibo: https://weibo.com/yourname || fab fa-weibo
  #Google: https://plus.google.com/yourname || fab fa-google
  #Twitter: https://twitter.com/yourname || fab fa-twitter
  #FB Page: https://www.facebook.com/yourname || fab fa-facebook
  #StackOverflow: https://stackoverflow.com/yourname || fab fa-stack-overflow
  #YouTube: https://youtube.com/yourname || fab fa-youtube
  #Instagram: https://instagram.com/yourname || fab fa-instagram
  #Skype: skype:yourname?call|chat || fab fa-skype
  Bilibili: https://space.bilibili.com/16535894 || far fa-smile
  个人云盘: http://pan.zodiaclab.com || fas fa-box


social_icons:
  enable: true
  icons_only: false
  transition: false

其中 social 块中，只需要以下面的结构增加社交链接即可：

链接名称: 链接地址 ||  fontawesome的图标

这里作者用的是一个国外免费的图标库 fontawesome，想要设备图标，只需要将对应的 html 标签复制过去即可。

Next-fontawesome.png

下面是我关于 links 的测试配置：

# Blog rolls
links_settings:
  icon: fa fa-globe # 链接标题所使用的图标
  title: 我的朋友 # 标题名称
  # Available values: block | inline
  layout: block


links:
  #Title: https://example.com
  我自己: https://zodiaclab.top

很可惜的是，这个配置方法就不能像 social 那样增加图标了，两者的比较效果可以到效果展示中查看。

效果展示#

上面是 social 中的链接，下面是 links 中的链接：

Next-个人链接.png

Next 5 ICP备案#

前言#

关于 ICP 备案是我们使用域名解析服务器时，必须先在工信部进行备案，并且会得到对应的备案号。

并且由于规定，我们必须把这个备案号放在我们的网站上。

使用过 wordpress 应该都知道，大部分主题都不会给你设置的空间，你只能到对应的文件里去改，有些主题还把对应内容封装到函数里，相当麻烦1。

而 Next 主题的作者，非常贴心得为国内用户开设一个独立的配置块。

配置文件#

Terminal window
vim hexo/themes/next/_config.yml

还是老样子，先贴上我关于备案的配置：

footer:
  ......
  beian:
    enable: true
    icp: 沪ICP备2021025139号
    # The digit in the num of gongan beian.
    gongan_id:
    # The full num of gongan beian.
    gongan_num:
    # The icon for gongan beian. See: http://www.beian.gov.cn/portal/download
    gongan_icon_url: /images/beian_icon.png
参数详细
enabletrue:显示备案信息
icp备案号
gongan_icon_url公安的图标

这里只需要配置 enable、icp 以及 gongan_icon_url 三个参数即可。

效果展示#

Next-备案信息.png

Footnotes#

  1. About CC Licenses ↩ ↩2

Next 安装指南
https://fuwari.vercel.app/posts/建站/hexo/next-安装指南/
作者
Asuwee
发布于
2021-12-14
许可协议
CC BY-NC-SA 4.0
Snap 使用经历分享
Hexo 安装指南
© 2018-2025 Asuwee. All Rights Reserved. / RSS / Sitemap
沪公网安备31012002006506号
Powered by Astro & Fuwari