HEXO.NEXT 主题美化

一、概述

什么事Hexo？

Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown（或其他渲染引擎）解析文章，在几秒内，即可利用靓丽的主题生成静态网页。

二、建站

安装 Hexo 完成后，请执行下列命令，Hexo 将会在指定文件夹中新建所需要的文件。

三、配置

可以在 _config.yml 中修改大部分的配置。

网站

参数	描述
`title`	网站标题
`subtitle`	网站副标题
`description`	网站描述
`keywords`	网站的关键词。支持多个关键词。
`author`	您的名字
`language`	网站使用的语言。对于简体中文用户来说，使用不同的主题可能需要设置成不同的值，请参考你的主题的文档自行设置，常见的有 `zh-Hans`和 `zh-CN`。
`timezone`	网站时区。Hexo 默认使用您电脑的时区。请参考时区列表进行设置，如 `America/New_York`, `Japan`, 和 `UTC` 。一般的，对于中国大陆地区可以使用 `Asia/Shanghai`。

其中，description主要用于SEO，告诉搜索引擎一个关于您站点的简单描述，通常建议在其中包含您网站的关键词。author参数用于主题显示文章的作者。

网址

参数	描述	默认值
`url`	网址, 必须以 `http://` 或 `https://` 开头
`root`	网站根目录	`url's pathname`
`permalink`	文章的永久链接格式	`:year/:month/:day/:title/`
`permalink_defaults`	永久链接中各部分的默认值
`pretty_urls`	改写 `permalink` 的值来美化 URL
`pretty_urls.trailing_index`	是否在永久链接中保留尾部的 `index.html`，设置为 `false` 时去除	`true`
`pretty_urls.trailing_html`	是否在永久链接中保留尾部的 `.html`, 设置为 `false` 时去除 (对尾部的 `index.html`无效)	`true`

网站存放在子目录

如果您的网站存放在子目录中，例如 http://example.com/blog，则请将您的 url 设为 http://example.com/blog 并把 root 设为 /blog/。

例如：

# 比如，一个页面的永久链接是 http://example.com/foo/bar/index.html
pretty_urls:
  trailing_index: false
# 此时页面的永久链接会变为 http://example.com/foo/bar/

参数	描述	默认值
`source_dir`	资源文件夹，这个文件夹用来存放内容。	`source`
`public_dir`	公共文件夹，这个文件夹用于存放生成的站点文件。	`public`
`tag_dir`	标签文件夹	`tags`
`archive_dir`	归档文件夹	`archives`
`category_dir`	分类文件夹	`categories`
`code_dir`	Include code 文件夹，`source_dir` 下的子目录	`downloads/code`
`i18n_dir`	国际化（i18n）文件夹	`:lang`
`skip_render`	跳过指定文件的渲染。匹配到的文件将会被不做改动地复制到 `public` 目录中。您可使用 glob 表达式来匹配路径。

例如：

skip_render: "mypage/**/*"
# 将会直接将 `source/mypage/index.html` 和 `source/mypage/code.js` 不做改动地输出到 'public' 目录
# 你也可以用这种方法来跳过对指定文章文件的渲染
skip_render: "_posts/test-post.md"
# 这将会忽略对 'test-post.md' 的渲染

提示

如果您刚刚开始接触 Hexo，通常没有必要修改这一部分的值。

文章

参数	描述	默认值
`new_post_name`	新文章的文件名称	:title.md
`default_layout`	预设布局	post
`auto_spacing`	在中文和英文之间加入空格	false
`titlecase`	把标题转换为 title case	false
`external_link`	在新标签中打开链接	true
`external_link.enable`	在新标签中打开链接	`true`
`external_link.field`	对整个网站（`site`）生效或仅对文章（`post`）生效	`site`
`external_link.exclude`	需要排除的域名。主域名和子域名如 `www` 需分别配置	`[]`
`filename_case`	把文件名称转换为 (1) 小写或 (2) 大写	0
`render_drafts`	显示草稿	false
`post_asset_folder`	启动 Asset 文件夹	false
`relative_link`	把链接改为与根目录的相对位址	false
`future`	显示未来的文章	true
`highlight`	代码块的设置, 请参考 Highlight.js 进行设置
`prismjs`	代码块的设置, 请参考 PrismJS 进行设置

相对地址

默认情况下，Hexo 生成的超链接都是绝对地址。例如，如果您的网站域名为 example.com,您有一篇文章名为 hello，那么绝对链接可能像这样：http://example.com/hello.html，它是绝对于域名的。相对链接像这样：/hello.html，也就是说，无论用什么域名访问该站点，都没有关系，这在进行反向代理时可能用到。通常情况下，建议使用绝对地址。

分类 & 标签

参数	描述	默认值
`default_category`	默认分类	`uncategorized`
`category_map`	分类别名
`tag_map`	标签别名

日期 / 时间格式

Hexo 使用 Moment.js 来解析和显示时间。

参数	描述	默认值
`date_format`	日期格式	`YYYY-MM-DD`
`time_format`	时间格式	`HH:mm:ss`
`updated_option`	当 Front Matter 中没有指定 `updated` 时 `updated` 的取值	`mtime`

updated_option

updated_option 控制了当 Front Matter 中没有指定 updated 时，updated 如何取值：

mtime: 使用文件的最后修改时间。这是从 Hexo 3.0.0 开始的默认行为。

date: 使用 date 作为 updated 的值。可被用于 Git 工作流之中，因为使用 Git 管理站点时，文件的最后修改日期常常会发生改变

empty: 直接删除 updated。使用这一选项可能会导致大部分主题和插件无法正常工作。

use_date_for_updated 选项已经被废弃，将会在下个重大版本发布时去除。请改为使用 updated_option: 'date'。

use_date_for_updated` | 启用以后，如果 Front Matter 中没有指定 `updated`， [`post.updated`](https://hexo.io/zh-cn/docs/configuration) 将会使用 `date` 的值而不是文件的创建时间。在 Git 工作流中这个选项会很有用 | `true

分页

参数	描述	默认值
`per_page`	每页显示的文章量 (0 = 关闭分页功能)	`10`
`pagination_dir`	分页目录	`page`

扩展

参数	描述
`theme`	当前主题名称。值为`false`时禁用主题
`theme_config`	主题的配置文件。在这里放置的配置会覆盖主题目录下的 `_config.yml` 中的配置
`deploy`	部署部分的设置
`meta_generator`	Meta generator 标签。值为 `false` 时 Hexo 不会在头部插入该标签

四、主题

1、NEXT主题

1.1、安装

旧版本next主题地址: 5以下的版本包含5: 旧版本5以下

安装指令: 首先打开git bash进入根目录即 “ /blog/“ 执行命令:git clone https://github.com/iissnan/hexo-theme-next themes/next 此时会从next主题的作者的github仓库克隆next主题到我们本地的 /blog/theme/next文件夹下

最新版在这里下载: 新版本6开始

安装指令: 同上 git clone https://github.com/theme-next/hexo-theme-next themes/next

1.2、更换主题

安装完成后，打开 站点配置文件:BLog\_config.yml【下同】找到 theme 字段，并将其值更改为 next, 一定要保存

1	`theme: next`

主题配置好后，打开主题配置文件Blog\themes\next\_config.yml【下同】

Next提供了四中主题风格scheme，可以在主题配置文件blog/themes/next/_config.yml文件中进行选择，分别是Muse、Mist、Pisces、Gemini：

2、基本配置

站点基本配置

# Site
title: 洋群满满のBlog
subtitle: '青青草原'
description: '这是一个来自青青草原的羊村里面发生的故事...'
keywords: 洋群满满
author: 洋群满满
language: zh-CN  # 主题语言配置
timezone: 'Asia/Shanghai'  # 时区设置

# URL
## Set your site url here. For example, if you use GitHub Page, set url as 'https://username.github.io/project'
url: https://yangyangmm.cn #绑定域名
root: /  #默认根路径，指向实际的source
permalink: :year/:month/:day/:title/
permalink_defaults:

# Directory
source_dir: source
public_dir: public
tag_dir: tags
archive_dir: archives
category_dir: categories
code_dir: downloads/code
i18n_dir: :lang
skip_render: README.md # 部署的时候不包含的文件

# Writing
new_post_name: :title.md # 默认的新博文名称
default_layout: post # 默认布局
titlecase: false # 将 title 转换为 titlecase
external_link:
  enable: true # 新标签页打开连接
  field: site # Apply to the whole site
  exclude: ''
filename_case: 0  # 把博客名称改成小写/大写（1,2）
render_drafts: false  # 是否显示草稿
post_asset_folder: true #是否启用资源文件夹（用来存放相对路径图片或文件）
relative_link: false  # 是否把链接改为与根目录的相对位置
future: true
highlight:
  enable: true      # 是否开启代码高亮
  line_number: true # 是否增加代码行号
  auto_detect: false # 自动判断代码语言



# Home page setting
# path: Root path for your blogs index page. (default = '')
# per_page: Posts displayed per page. (0 = disable pagination)
# order_by: Posts order. (Order by date descending by default)
index_generator: # 首页博客分布
  path: ''  # 博客的默认路径
  per_page: 10  # 每页博客数量上限
  order_by: -date # 博客排序 默认按时间排序

# Category & Tag
default_category: uncategorized
category_map:
tag_map:

# Metadata elements
## https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta
meta_generator: true

# Date / Time format
## Hexo uses Moment.js to parse and display date
## You can customize the date format as defined in
## http://momentjs.com/docs/#/displaying/format/
date_format: YYYY-MM-DD  # 博客日期格式
time_format: HH:mm:ss    # 博客时间格式
## updated_option supports 'mtime', 'date', 'empty'
updated_option: 'mtime'

# Pagination
## Set per_page to 0 to disable pagination
per_page: 10  # 每页博客数量上限
pagination_dir: page

# Include / Exclude file(s)
## include:/exclude: options only apply to the 'source/' folder
include:
exclude:
ignore:

#归档页的分页设置
archive_generator: #归档页的配置
  per_page: 30 #归档页每页博客数
  yearly: true #按年归档
  monthly: true #按月归档
#标签页的分页设置
tag_generator:
  per_page: 20 #标签页每页博客数


#主题配置
# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: next

# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
deploy: #博客部署
  type: git
  repo: 
    #github: https://github.com/yangyang1-0/yangyang1-0.github.io
    #coding: https://git.coding.net/nightmaredimple/nightmaredimple.git
  branch: master

主题基本配置

override: false  # 是否将主题配置为默认样式，默认Flase

# Allow to cache content generation. Introduced in NexT v6.0.0.
cache:
  enable: true #表示添加缓存功能，这样浏览器后续打开我们的博客网站会更快
  
menu: #设置博客各个页面的相对路径，默认根路径是blog/source
  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

# Enable / Disable menu icons / item badges.
menu_settings:
  icons: true  # 是否显示各个页面的图标
  badges: false # 是否显示分类/标签/归档页的内容量

基本配置完后的样式如下：十分的简朴

3、配置站点Logo

博客网站的图标可以在easyicon、bitbug、iconfont等网站选择和制作，然后选择或者创建相应大小的图标文件，放置在Blog/themes/next/sources/images目录下，并在主题配置文件中进行如下配置：

favicon:
  small: /images/favicon-16x16-next.png  # 大小16
  medium: /images/favicon-32x32-next.png  # 大小32
  apple_touch_icon: /images/apple-touch-icon-next.png  # 大小200
  safari_pinned_tab: /images/logo.svg   # 大小400
  #android_manifest: /images/manifest.json
  #ms_browserconfig: /images/browserconfig.xml

配置完成后，直接刷新网页即可，样式如下：

4、鼠标点击特效

4.1、爱心特效

1、新建文件

在/themes/next/source/js/src下新建文件 clicklove.js ，【我的js目录下没有src文件夹，自己新建即可】接着把下面的代码拷贝粘贴到 clicklove.js 文件中：

1
2

!function(e,t,a){function n(){c(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: fixed;}.heart:after{top: -5px;}.heart:before{left: -5px;}"),o(),r()}function r(){for(var e=0;e<d.length;e++)d[e].alpha<=0?(t.body.removeChild(d[e].el),d.splice(e,1)):(d[e].y--,d[e].scale+=.004,d[e].alpha-=.013,d[e].el.style.cssText="left:"+d[e].x+"px;top:"+d[e].y+"px;opacity:"+d[e].alpha+";transform:scale("+d[e].scale+","+d[e].scale+") rotate(45deg);background:"+d[e].color+";z-index:99999");requestAnimationFrame(r)}function o(){var t="function"==typeof e.onclick&&e.onclick;e.onclick=function(e){t&&t(),i(e)}}function i(e){var a=t.createElement("div");a.className="heart",d.push({el:a,x:e.clientX-5,y:e.clientY-5,scale:1,alpha:1,color:s()}),t.body.appendChild(a)}function c(e){var a=t.createElement("style");a.type="text/css";try{a.appendChild(t.createTextNode(e))}catch(t){a.styleSheet.cssText=e}t.getElementsByTagName("head")[0].appendChild(a)}function s(){return"rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")"}var d=[];e.requestAnimationFrame=function(){return e.requestAnimationFrame||e.webkitRequestAnimationFrame||e.mozRequestAnimationFrame||e.oRequestAnimationFrame||e.msRequestAnimationFrame||function(e){setTimeout(e,1e3/60)}}(),n()}(window,document);

2、追加设置

在\themes\next\layout\_layout.swig文件末尾添加：

1 2	`<!-- 页面点击小红心 --> <script type="text/javascript" src="/js/src/clicklove.js"></script>`

具体位置如图：

3、效果展示

样式设置完成后样式如下：

4.2、烟花特效

1、新建文件

在/themes/next/source/js/src下新建文件fireworks.js ，接着把下面的代码拷贝粘贴到 fireworks.js 文件中：

1
2

"use strict";function updateCoords(e){pointerX=(e.clientX||e.touches[0].clientX)-canvasEl.getBoundingClientRect().left,pointerY=e.clientY||e.touches[0].clientY-canvasEl.getBoundingClientRect().top}function setParticuleDirection(e){var t=anime.random(0,360)*Math.PI/180,a=anime.random(50,180),n=[-1,1][anime.random(0,1)]*a;return{x:e.x+n*Math.cos(t),y:e.y+n*Math.sin(t)}}function createParticule(e,t){var a={};return a.x=e,a.y=t,a.color=colors[anime.random(0,colors.length-1)],a.radius=anime.random(16,32),a.endPos=setParticuleDirection(a),a.draw=function(){ctx.beginPath(),ctx.arc(a.x,a.y,a.radius,0,2*Math.PI,!0),ctx.fillStyle=a.color,ctx.fill()},a}function createCircle(e,t){var a={};return a.x=e,a.y=t,a.color="#F00",a.radius=0.1,a.alpha=0.5,a.lineWidth=6,a.draw=function(){ctx.globalAlpha=a.alpha,ctx.beginPath(),ctx.arc(a.x,a.y,a.radius,0,2*Math.PI,!0),ctx.lineWidth=a.lineWidth,ctx.strokeStyle=a.color,ctx.stroke(),ctx.globalAlpha=1},a}function renderParticule(e){for(var t=0;t<e.animatables.length;t++){e.animatables[t].target.draw()}}function animateParticules(e,t){for(var a=createCircle(e,t),n=[],i=0;i<numberOfParticules;i++){n.push(createParticule(e,t))}anime.timeline().add({targets:n,x:function(e){return e.endPos.x},y:function(e){return e.endPos.y},radius:0.1,duration:anime.random(1200,1800),easing:"easeOutExpo",update:renderParticule}).add({targets:a,radius:anime.random(80,160),lineWidth:0,alpha:{value:0,easing:"linear",duration:anime.random(600,800)},duration:anime.random(1200,1800),easing:"easeOutExpo",update:renderParticule,offset:0})}function debounce(e,t){var a;return function(){var n=this,i=arguments;clearTimeout(a),a=setTimeout(function(){e.apply(n,i)},t)}}var canvasEl=document.querySelector(".fireworks");if(canvasEl){var ctx=canvasEl.getContext("2d"),numberOfParticules=30,pointerX=0,pointerY=0,tap="mousedown",colors=["#FF1461","#18FF92","#5A87FF","#FBF38C"],setCanvasSize=debounce(function(){canvasEl.width=2*window.innerWidth,canvasEl.height=2*window.innerHeight,canvasEl.style.width=window.innerWidth+"px",canvasEl.style.height=window.innerHeight+"px",canvasEl.getContext("2d").scale(2,2)},500),render=anime({duration:1/0,update:function(){ctx.clearRect(0,0,canvasEl.width,canvasEl.height)}});document.addEventListener(tap,function(e){"sidebar"!==e.target.id&&"toggle-sidebar"!==e.target.id&&"A"!==e.target.nodeName&&"IMG"!==e.target.nodeName&&(render.play(),updateCoords(e),animateParticules(pointerX,pointerY))},!1),setCanvasSize(),window.addEventListener("resize",setCanvasSize,!1)}"use strict";function updateCoords(e){pointerX=(e.clientX||e.touches[0].clientX)-canvasEl.getBoundingClientRect().left,pointerY=e.clientY||e.touches[0].clientY-canvasEl.getBoundingClientRect().top}function setParticuleDirection(e){var t=anime.random(0,360)*Math.PI/180,a=anime.random(50,180),n=[-1,1][anime.random(0,1)]*a;return{x:e.x+n*Math.cos(t),y:e.y+n*Math.sin(t)}}function createParticule(e,t){var a={};return a.x=e,a.y=t,a.color=colors[anime.random(0,colors.length-1)],a.radius=anime.random(16,32),a.endPos=setParticuleDirection(a),a.draw=function(){ctx.beginPath(),ctx.arc(a.x,a.y,a.radius,0,2*Math.PI,!0),ctx.fillStyle=a.color,ctx.fill()},a}function createCircle(e,t){var a={};return a.x=e,a.y=t,a.color="#F00",a.radius=0.1,a.alpha=0.5,a.lineWidth=6,a.draw=function(){ctx.globalAlpha=a.alpha,ctx.beginPath(),ctx.arc(a.x,a.y,a.radius,0,2*Math.PI,!0),ctx.lineWidth=a.lineWidth,ctx.strokeStyle=a.color,ctx.stroke(),ctx.globalAlpha=1},a}function renderParticule(e){for(var t=0;t<e.animatables.length;t++){e.animatables[t].target.draw()}}function animateParticules(e,t){for(var a=createCircle(e,t),n=[],i=0;i<numberOfParticules;i++){n.push(createParticule(e,t))}anime.timeline().add({targets:n,x:function(e){return e.endPos.x},y:function(e){return e.endPos.y},radius:0.1,duration:anime.random(1200,1800),easing:"easeOutExpo",update:renderParticule}).add({targets:a,radius:anime.random(80,160),lineWidth:0,alpha:{value:0,easing:"linear",duration:anime.random(600,800)},duration:anime.random(1200,1800),easing:"easeOutExpo",update:renderParticule,offset:0})}function debounce(e,t){var a;return function(){var n=this,i=arguments;clearTimeout(a),a=setTimeout(function(){e.apply(n,i)},t)}}var canvasEl=document.querySelector(".fireworks");if(canvasEl){var ctx=canvasEl.getContext("2d"),numberOfParticules=30,pointerX=0,pointerY=0,tap="mousedown",colors=["#FF1461","#18FF92","#5A87FF","#FBF38C"],setCanvasSize=debounce(function(){canvasEl.width=2*window.innerWidth,canvasEl.height=2*window.innerHeight,canvasEl.style.width=window.innerWidth+"px",canvasEl.style.height=window.innerHeight+"px",canvasEl.getContext("2d").scale(2,2)},500),render=anime({duration:1/0,update:function(){ctx.clearRect(0,0,canvasEl.width,canvasEl.height)}});document.addEventListener(tap,function(e){"sidebar"!==e.target.id&&"toggle-sidebar"!==e.target.id&&"A"!==e.target.nodeName&&"IMG"!==e.target.nodeName&&(render.play(),updateCoords(e),animateParticules(pointerX,pointerY))},!1),setCanvasSize(),window.addEventListener("resize",setCanvasSize,!1)};

2、追加设置

打开\themes\next\layout\_layout.swig文件,在</body>上面写下如下代码：

{% if theme.fireworks %}
   <canvas class="fireworks" style="position: fixed;left: 0;top: 0;z-index: 1; pointer-events: none;" ></canvas> 
   <script type="text/javascript" src="//cdn.bootcss.com/animejs/2.2.0/anime.min.js"></script> 
   <script type="text/javascript" src="/js/src/fireworks.js"></script>
{% endif %}

具体位置如图：

打开主题配置文件，在末尾追加如下代码：

1 2	`# Fireworks fireworks: true`

3、效果展示

样式设置完成后样式如下：

4.3、文字特效

1、新建文件

在/themes/next/source/js/src下新建文件 clicklove.js ，【我的js目录下没有src文件夹，自己新建即可】接着把下面的代码拷贝粘贴到 clicklove.js 文件中：

1
2

!function(e,t,a){function n(){c(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: fixed;}.heart:after{top: -5px;}.heart:before{left: -5px;}"),o(),r()}function r(){for(var e=0;e<d.length;e++)d[e].alpha<=0?(t.body.removeChild(d[e].el),d.splice(e,1)):(d[e].y--,d[e].scale+=.004,d[e].alpha-=.013,d[e].el.style.cssText="left:"+d[e].x+"px;top:"+d[e].y+"px;opacity:"+d[e].alpha+";transform:scale("+d[e].scale+","+d[e].scale+") rotate(45deg);background:"+d[e].color+";z-index:99999");requestAnimationFrame(r)}function o(){var t="function"==typeof e.onclick&&e.onclick;e.onclick=function(e){t&&t(),i(e)}}function i(e){var a=t.createElement("div");a.className="heart",d.push({el:a,x:e.clientX-5,y:e.clientY-5,scale:1,alpha:1,color:s()}),t.body.appendChild(a)}function c(e){var a=t.createElement("style");a.type="text/css";try{a.appendChild(t.createTextNode(e))}catch(t){a.styleSheet.cssText=e}t.getElementsByTagName("head")[0].appendChild(a)}function s(){return"rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")"}var d=[];e.requestAnimationFrame=function(){return e.requestAnimationFrame||e.webkitRequestAnimationFrame||e.mozRequestAnimationFrame||e.oRequestAnimationFrame||e.msRequestAnimationFrame||function(e){setTimeout(e,1e3/60)}}(),n()}(window,document);

2、追加设置

在\themes\next\layout\_layout.swig文件末尾添加：

1 2	`<!-- 页面点击小红心 --> <script type="text/javascript" src="/js/src/clicklove.js"></script>`

具体位置如图：

3、效果展示

样式设置完成后样式如下：

Hexo

本博客所有文章除特别声明外，均采用 CC BY-SA 4.0 协议，转载请注明出处！

Python基础——注释上一篇

Python基础——中篇下一篇