hexo及next主题修改

Posted lijianming180

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了hexo及next主题修改相关的知识，希望对你有一定的参考价值。

通过npm uninstall <package>命令，你可以将node_modules目录下的某个依赖包移除：

1
npm uninstall 包名

要从package.json文件的依赖列表中移除，你需要使用--save标签：

1
npm uninstall

注意：如果你是以开发依赖包（devDependency）的方式安装的（即安装时待--dave -dev标签），那用--save将无法从package.json中移除，你必须用--save -dev标签。

升级Next7.0.0

运行如下代码：

1
2
cd hexo/themes
git clone https://github.com/theme-next/hexo-theme-next themes/next7.0.0

这样做有个好处，在hexo/themes/下会生成新旧两个next主题文件夹，我们可以在新旧两个next主题间切换。

7.0.0主题的使用和优化

7.0.0主题的的使用

在站点根目录下打开_config.yml找到theme，把它改为theme: next7.0.0

技术图片

Next主题的设定

打开themes/next7.0.0下的_config.yml文件，在修改前最好将 _config.yml文件做个备份。找到Schemes修改为自己喜欢的主题样式。

技术图片

设置语言

打开站点根目录下的_config.yml文件，找到language，修改为language: zh-CN技术图片

设置菜单

打开themes/next7.0.0下的_config.yml文件，找到menu按照自己的需求修改技术图片

设置头像

把图片放入themes/next7.0.0/source/images下，文件名为avatar01.jgp，并在/themes/next7.0.0/_config.yml中找到avatar修改为：技术图片

侧边栏设置

打开/themes/next7.0.0下的_config.yml找到social并根据自己的需求修改就行

济览页面时显示进度

打开/themes/next7.0.0下的_config.yml找到scrollpercent把false修改为true

代码添加复制按钮并显示复制成功

打开/themes/next7.0.0下的_config.yml找到codeblock修改如下：技术图片

百度统计

登录百度统计打开管理页面下的代码获取，将hm.js?后的ID填入baidu_analytics

开启阅读人数和阅读总人数

打开/themes/next7.0.0下的_config.yml找到busuanzi修改如下：技术图片

设置文章的阅读时长和字数

先安装插件

1
npm install hexo-symbols-count-time --save

打开/themes/next7.0.0下的_config.yml找到symbols_count_time修改如下：技术图片

站点根目录下_config.yml添加以下内容

1
2
3
4
5
6
7
symbols_count_time:
 #文章内是否显示
  symbols: true
  time: true
 # 网页底部是否显示
  total_symbols: true
  total_time: true

设置网站图标

找一张或者自己制作一张32*32 图片，并改各为favicon.ico放到/themes/next7.0.0/source/images里，修改/themes/next7.0.0/_config.yml里的favicon如下：技术图片

设置网站运行时间

打开hexothemesnextlayout_paritalsfooter.swig文件，在相应位置输入以下代码

1
本站已安全运行 90 天 06 小时 00 分 09 秒

Tab tag样式

我们先来看一下效果

选项卡１

代码：

1
2
3
4
5
6
7
8
{% tabs tab %}

**选项卡１**


**选项卡2**

{% endtabs %}

然后修改主题配置文件hexo/themes/next7.0/_configl.yml

1
2
3
4
5
6
7
# Tabs tag
tabs:
  enable: true
  transition:
    tabs: true
    labels: true
  border_radius: 0

更多详细设置请点击

大专栏  hexo及next主题修改tle="链接唯一化">链接唯一化

链接唯一化的好处在于不管你修改多少次文章链接也不会变，当文章标题使用中文时URL也不会出现中文，这样做有利于分享和SEO。

安装hexo-abbrlink插件

1
npm install hexo-abbrlink --save

打开站点根目下的_config.yml找到permalink做如下修改：

1
2
3
4
5
6
7
8
9
10
11
12

# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: http://tophat.top
root: /
permalink: posts/:abbrlink.html # 默认项 :year/:month/:day/:title/
permalink_defaults: 

# 链接持久化插件abbrlink，添加插件：npm install hexo-abbrlink --save
abbrlink:
alg: crc32  # 算法：crc16(default) and crc32
rep: hex    # 进制：dec(default) and hex

算法和进制的组合如下：

1
2
3
4
5
6
7
8
crc16 
https://post.zz173.com/posts/66c8.html
crc16 & dec
https://post.zz173.com/posts/65535.html
crc32 
https://post.zz173.com/posts/8ddf18fb.html
crc32 & dec
https://post.zz173.com/posts/1690090958.html

使用crc16算法时文章数上限是65535

今天hexo g时发现页面变成了undefined.html，上网搜了一圈也没找到答案，正准备用其它插件代替时突然发现package.json里没有了abbrlink模块，于是重装模块并hexo cl && hexo g一切恢复正常。

为外部链接添加nofollow

139139未使用

安装nofollow插件

1
npm install hexo-nofollow --save

将以下代码加入到站点根目录下的_config.yml中

1
2
3
4
5
6
7
# nofollow
nofollow:
  enable: true
  exclude:
    - exclude1.com
    - exclude2.com
external_link: true

  • enable：启用插件

  • exclude：排除主机名

  • external_link：添加target=”_blank”

    注意：external_link设置在默认的_config.yml中已经有了，只有在找不到的情况下再添加。

修改文章底部的那个带#号的标签

修改模板 /themes/next/layout/_macro/post.swig

搜索 rel=”tag”>#，将 # 换成 <i class="fa fa-tag"></i>

修改网站小图标

将图标放入 /themes/next/source/images

修改出题的配置文件

1
2
3
4
5
favicon:
  small: /images/favicon-16x16-next.png
  medium: /images/favicon-32x32-next.png
  apple_touch_icon: /images/apple-touch-icon-next.png
  safari_pinned_tab: /images/logo.svg

设置站点首页不显示文章全文

打开 主题配置文件 _config.yml文件，注意不是站点配置文件，该文件在对应主题文件夹下。找到如下：

1
2
3
4
5
# Automatically Excerpt. Not recommend.
# Please use <!-- more --> in the post to control excerpt accurately.
auto_excerpt:
  enable: true	#默认为false
  length: 150

把这里的 false 改为 true 就可以了在首页启动显示文章预览了，length 是显示预览的长度。

这里我们可以通过在文章使用标志来精确控制文章的摘要预览，比如这篇文章就是在这个段落的末尾添加了该标志，所以本文在首页的预览就会显示到这个段落为止。

强烈推荐使用该标志来控制文章的摘要预览，因为这种方式可以让摘要也按照 css 文件中的样式来渲染。如果使用了自动摘要的功能，你会发现文章摘要是一大团没有样式的文本，很是难看。

其他的文章配置（字数统计、阅读时长）

1
2
3
4
5
6
7
8
9
10
11
# ---------------------------------------------------------------
# Post Settings
# ---------------------------------------------------------------

# Automatically scroll page to section which is under <!-- more --> mark.
# 自动将页面滚动到<!-- more -->标记下的地方。
scroll_to_more: false

# Automatically saving scroll position on each post/page in cookies.
# 自动保存每篇文章或页面上一次滚动的地方。
save_scroll: false

以上是关于hexo及next主题修改的主要内容，如果未能解决你的问题，请参考以下文章

Hexo next博客添加折叠块功能添加折叠代码块

Hexo-next主题配置

Hexo-修改Hexo主题

详细配置Next部分功能及插件

Gitee + Hexo 搭建个人博客

Hexo+NexT：在Windows下安装Hexo+NexT及搭建博客