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样式

我们先来看一下效果

• tab 1
• tab 2

选项卡１

代码：

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