文章目录

站点优化
- 首页显示文章摘要
- 修改站点页脚
- 修改网站 Favicon
- 添加社交链接
- 站点添加版权协议
- - 文章底部添加版权信息
- 修改菜单及创建分类页
- 添加顶部加载条
- 添加动态背景
- 增加回到顶部按钮及显示当前浏览进度
- 为博客加上萌萌的
- 增加本地搜索功能
- 404页面
- 在网站底部加上访问量
文章页面优化
- 修改文章目录导航
- - 取消数字编号
  - 修改文章meta信息
- 设置代码高亮主题
- 全站及文章字数统计及阅读时长
- 使用hexo-abbrlink 製作永久連結
- 参考文章
- - 基础搭建
  - 进阶设置
  - 推荐指南

站点优化

首页显示文章摘要

主题默认设置，首页将会显示每一篇文章的全文，如果想只显示文章摘要，可以在主题配置文件（/themes/next/_config.yml）中这样修改：

# 自动摘要提取设定
auto_excerpt:enable: truelength: 150 # 摘要长度

用户可以在文章中使用标记来精确划分摘要信息，标记之前的堕落将作为摘要显示在首页。

如果文章的Front-Matter(文章开头的配置信息）中有非空的description字段，则该字段的内容会被作为摘要显示。

修改站点页脚

在主题配置文件中修改网站页脚信息：

footer:  # 底部信息区since: 2018  # 建站时间icon:name: heart   # 图标名称animated: true   # 开启动画color: "#ff0000"   # 图标颜色powered:enable: true  # 显示由 Hexo 强力驱动version: false  # 隐藏 Hexo 版本号theme:enable: true  # 显示所用的主题名称version: false  # 隐藏主题版本号

修改网站 Favicon

Favicon 即浏览器标签左侧的图标。下载自己喜欢的图标置于 themes\next\source\images\ 目录下，命名方式参考主题配置文件中的 favicon 字段。

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  # safari浏览器标签页图标

添加社交链接

用户可以在主题配置文件中根据样例提示添加个人社交软件链接：

social:GitHub: https://github.com/yourname || githubE-Mail: mailto:yourname@gmail.com || envelopeWeibo: https://weibo.com/yourname || weiboGoogle: https://plus.google.com/yourname || googleTwitter: https://twitter.com/yourname || twitterFB Page: https://www.facebook.com/yourname || facebookVK Group: https://vk.com/yourname || vkStackOverflow: https://stackoverflow.com/yourname || stack-overflowYouTube: https://youtube.com/yourname || youtubeInstagram: https://instagram.com/yourname || instagramSkype: skype:yourname?call|chat || skypesocial_icons:   enable: true  # 显示社交软件图标icons_only: false  # 显示图标的同时显示文字

站点添加版权协议

在主题配置文件中设置相关字段并选择知识共享协议：

creative_commons: by-nc-sa

文章底部添加版权信息

在目录/next/layout/_macro/添加my-copyright.swig：

`{% if page.copyright %}<div class="my_post_copyright">  <script   src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>  <!-- JS库 sweetalert 可修改路径 -->  <script type="text/javascript"   src="http://jslibs.wuxubj.cn/sweetalert_mini/jquery-1.7.1.min.js"></script>  <script   src="http://jslibs.wuxubj.cn/sweetalert_mini/sweetalert.min.js"></script>  <link rel="stylesheet" type="text/css" href="http://jslibs.wuxubj.cn/sweetalert_mini/sweetalert.mini.css">  <p><span>本文标题:</span><a href="{{ url_for(page.path) }}>{{ page.title }}/a></p>  <p><span>文章作者:</span><a href="/" title="访问 {{ theme.author }}的个人博客">{{ theme.author }}/a></p>  <p><span>发布时间:</span>{{ page.date.format("YYYY年MM月DD日 - HH:MM") }}/p>  <p><span>最后更新:</span>{{ page.updated.format("YYYY年MM月DD日 - HH:MM") }}/p>  <p><span>原始链接:</span><a href="{{ url_for(page.path) }} title="{{ page.title }}>{{ page.permalink }}/a>    <span class="copy-path"  title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="{{ page.permalink }}  aria-label="复制成功！"></i></span>  </p>  <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license" href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank" title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0 国际</a> 转载请保留原文链接及作者。</p>  </div><script>     var clipboard = new Clipboard(.fa-clipboard);    clipboard.on(success, $(function(){      $(".fa-clipboard").click(function(){        swal({             title: "",             text: 复制成功,             html: false,          timer: 500,             showConfirmButton: false        });      });    }));  </script>{% endif %}`

在目录next/source/css/_common/components/post/下添加my-post-copyright.styl：

.my_post_copyright {width: 85%;max-width: 45em;margin: 2.8em auto 0;padding: 0.5em 1.0em;border: 1px solid #d3d3d3;font-size: 0.93rem;line-height: 1.6em;word-break: break-all;background: rgba(255,255,255,0.4);
}
.my_post_copyright p{margin:0;}
.my_post_copyright span {display: inline-block;width: 5.2em;color: #b5b5b5;font-weight: bold;
}
.my_post_copyright .raw {margin-left: 1em;width: 5em;
}
.my_post_copyright a {color: #808080;border-bottom:0;
}
.my_post_copyright a:hover {color: #a3d2a3;text-decoration: underline;
}
.my_post_copyright:hover .fa-clipboard {color: #000;
}
.my_post_copyright .post-url:hover {font-weight: normal;
}
.my_post_copyright .copy-path {margin-left: 1em;width: 1em;+mobile(){display:none;}
}
.my_post_copyright .copy-path:hover {color: #808080;cursor: pointer;
}

修改next/layout/_macro/post.swig，在代码

<div>{% if not is_index %}{% include wechat-subscriber.swig %}{% endif %}
</div>

之前添加增加如下代码：

<div>{% if not is_index %}{% include my-copyright.swig %}{% endif %}
</div>

修改next/source/css/_common/components/post/post.styl文件，在最后一行增加代码：

@import "my-post-copyright"

如果要在该博文下面增加版权信息的显示，需要在 Markdown 中增加copyright: true的设置，类似：

---
title:
date:
tags:
categories:
copyright: true
---

修改菜单及创建分类页

修改主题配置文件下的menu，按需打开菜单。

menu:home: / || homeabout: /about/ || usertags: /tags/ || tagscategories: /categories/ || tharchives: /archives/ || archive#schedule: /schedule/ || calendarsitemap: /sitemap.xml || sitemap#commonweal: /404/ || heartbeat

虽然现在站点已经有分页，但是仍然不能打开。因为只有了入口，但还没有标签页面，需要在命令行输入如下命令：hexo new page tags新建出标签页。

同样的道理，开启分类页的时候要输入hexo new page categories来新建出分类页。

添加顶部加载条

根目录打开命令行，输入如下命令：

git clone https://github.com/theme-next/theme-next-pace themes/next/source/lib/pace

然后主题配置文件搜索pace字段，修改pace: false为pace: true即可开启加载条功能，修改下方的pace-theme字段还可以修改加载条的样式。

pace:enable: true# Themes list:# 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 | minimaltheme: mac-osx

添加动态背景

根目录打开命令行，输入：

git clone https://github.com/theme-next/theme-next-canvas-nest themes/next/source/lib/canvas-nest

主题配置文件搜索canvas-nest字段，enable项设置为true。

canvas_nest:enable: false# 是否在手机端显示。onmobile: true # Display on mobile or not# 线条颜色, 默认: `'0,0,0'`；三个数字分别为(R,G,B)color: "0,0,255" # RGB values, use `,` to separate# 线条透明度（0~1）, 默认: `0.5opacity: 0.5 # The opacity of line: 0~1zIndex: -1 # z-index property of the background# count`: 线条的总数量, 默认: `150`count: 99 # The number of lines

增加回到顶部按钮及显示当前浏览进度

主题配置文件搜索b2t字段，将b2t字段的false修改为true即可，（注意此功能只能用于Pisces和Gemini主题）。

# 返回顶部按钮
back2top:enable: true# Back to top in sidebar.sidebar: true# Scroll percent label in b2t button.scrollpercent: true

为博客加上萌萌的

首先安装插件，根目录命令行输入npm install --save hexo-helper-live2d
主题配置文件或者博客配置文件最下方添加如下代码：

注意：实测了一下在主题配置文件下用比较好使，但是官方文档中说明在博客配置文件中也可以，可能我配置有问题。

live2d:enable: truescriptFrom: localpluginRootPath: live2dw/pluginJsPath: lib/pluginModelPath: assets/tagMode: falsedebug: falsemodel:use: live2d-widget-model-<模型名>   display:position: rightwidth: 150height: 300mobile:show: true

修改模型，参考live2d-widget-models目前可用的模型如下：

live2d-widget-model-chitose
live2d-widget-model-epsilon2_1
live2d-widget-model-gf
live2d-widget-model-haru/01 (use npm install --save live2d-widget-model-haru)
live2d-widget-model-haru/02 (use npm install --save live2d-widget-model-haru)
live2d-widget-model-haruto
live2d-widget-model-hibiki
live2d-widget-model-hijiki
live2d-widget-model-izumi
live2d-widget-model-koharu
live2d-widget-model-miku
live2d-widget-model-ni-j
live2d-widget-model-nico
live2d-widget-model-nietzsche
live2d-widget-model-nipsilon
live2d-widget-model-nito
live2d-widget-model-shizuku
live2d-widget-model-tororo
live2d-widget-model-tsumiki
live2d-widget-model-unitychan
live2d-widget-model-wanko
live2d-widget-model-z16

增加本地搜索功能

首先安装插件，根目录命令行输入

npm install hexo-generator-searchdb --save

编辑博客配置文件，新增以下内容到任意位置：

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

主题配置文件搜索local_search字段，设置enable为true

`# Local searchlocal_search:  enable: true`

配置完成后保存，hexo g、hexo s查看。

404页面

原来的主题没有404页面，加一个也不是什么难事。首先在/source/目录下新建一个404.md，内容如下：

---
title: 404
date: 2019-07-19 16:41:10
type: "404"
layout: "404"
description: "你来到了没有知识的荒原 :("
---

然后在/themes/matery/layout/目录下新建一个404.ejs文件，内容如下：

<style type="text/css">/* don't remove. */.about-cover {height: 75vh;}
</style><div class="bg-cover pd-header about-cover"><div class="container"><div class="row"><div class="col s10 offset-s1 m8 offset-m2 l8 offset-l2"><div class="brand"><div class="title center-align">404</div><div class="description center-align"><%= page.description %></div></div></div></div></div>
</div>

在网站底部加上访问量

打开\themes\next\layout\_partials\footer.swig文件,在copyright前加上画红线这句话：

文章页面优化

修改文章目录导航

取消数字编号

在主题配置文件中关闭目录中的数字编号：

`toc:  number: false  # 关闭目录中的数字编号`

修改文章meta信息

默认主题配置中，标题下方会显示文章的创建时间、文章的修改时间、文章分类信息等元数据，用户可以在主题配置文件中自定义设置需要显示的 meta 元信息：

post_meta:item_text: true  # 显示文字说明created_at: true  # 显示文章创建时间updated_at:enabled: false  # 隐藏文章修改时间another_day: true  # 只有当修改时间和创建时间不是同一天的时候才显示categories: false  # 隐藏分类信息

设置代码高亮主题

NexT 使用 Tomorrow Theme作为代码高亮，共有5款主题供你选择。 NexT 默认使用的是白色的 normal 主题，可选的值有 normal，night， night blue， night bright， night eighties

更改 主题配置文件中的highlight_theme 字段，将其值设定成你所喜爱的高亮主题即可。

全站及文章字数统计及阅读时长

根目录执行：

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

博客配置文件底部添加如下内容，保存。

`symbols_count_time:  symbols: true  time: true  total_symbols: true  total_time: true`

使用hexo-abbrlink 製作永久連結

https://david6686.github.io/blog/silentink/54803/

参考文章

基础搭建

Yearito’s Blog

超详细Hexo+Github博客搭建小白教程

进阶设置

这应该是最全的hexo博客搭建以及next美化教程

Github Pages + Hexo 博客搭建，Next主题个性化修改

Hexo-NexT配置超炫网页效果(主要配置leancloud)

Hexo-Next搭建个人博客（添加统计访客量以及文章阅读量）

LeviDing 的博客

hexo的next主题个性化教程:打造炫酷网站

Hexo博客与Next主题的高级应用相关推荐

Hexo博客（Snail主题）搭建回顾概览
Hexo博客(Snail主题)搭建回顾概览笔者搭建博客地址:saltyfishyjk's Blog 文章目录 Hexo博客(Snail主题)搭建回顾概览 Part 0 前言写作背景定位您在这里 ...
hexo博客搭建及主题优化(一)
个人博客个人博客: https://www.crystalblog.xyz/ 备用地址: https://wang-qz.gitee.io/crystal-blog/ HexoBlog 个人博客介 ...
Hexo博客搭建之主题构建(melody)
前言上一章主要记录和说明Hexo的基础搭建和使用技巧. 本章, 我们主要记录下Hexo博客中关于主题的使用. 主题的选用后, 其实就是大量的配置. 以及第三方的集成, 是一件苦工, 但不难. 但是实 ...
给自己的hexo博客个性化Volantis主题
文章目录准备工作一.搭建一个大致框架二.在_config.yml的一些基础配置三.在_config.volantis.yml的进阶配置 1.首先我们要创建页面 2.自定义导航栏 3.自定义友链 ...
mysql find next_GitHub - flymysql/hexo-theme-next-flyme: 自己的hexo博客在next主题上做的修改...
这两天花了点时间修改了下自己的next主题的博客变化还是可以的样式表放在了GitHub上喜欢的话可以直接使用直接下载样式表,然后复制到自己主题的themes\next\source\css_cu ...
关于给hexo博客增加节日气氛主题切换（包括中国春节和圣诞节）
前言: 有段时间没折腾过博客页面样式了,偶然间看到了一个春节红灯笼的小demo,感觉很棒,所以拿过来了,并且自己新增了一些小挂件,加上了关键帧动画,圣诞树等元素.主题切换按钮原理和以前教程里面提到的暗 ...
hexo博客的yilia主题之添加分类
文章目录添加 categories 页面生成index.md文件修改index.md文件添加 categories 到menu菜单 yilia 主题的配置文件 main.826e88.css ...
Hexo博客之butterfly主题优雅魔改系列（持续更新）
为了便于各位博主了解到是否新增了魔改方案,请查看更新记录页前置说明魔改亮点
Hexo博客搭建之配置文件详解(Melody)
前言之前有2篇关于Hexo博客搭建的文章. 有人给我留言要我使用的配置文件. 我们今天就简单聊聊这个配置文件. 其实, 在前篇Hexo博客搭建之主题构建(melody), 以及作者官方文档内以及有着 ...
hexo博客matery主题个性化配置
hexo博客个性化配置参考博客 CDN加速:在页脚底部添加又拍云图片logo 博客文章开头format格式修改hexo new post格式的方法 hexo s手机端查看修改博客标题在手机端的字 ...

Hexo博客与Next主题的高级应用