注：两个 _config.yml，一个是站点配置文件，一个是主题配置文件。

一、基本美化

0. 更换主题风格

要更改的文件：主题配置文件

如果出现，本地的风格改变了，github 上的风格没改变

1. hexo clean # 清除

2. hexo g # 重新生成

3. hexo d # 上传

1. 语言

要更改的文件：站点配置文件

language: zh-Hans

2. 基本信息修改

要更改的文件：站点配置文件

# Site
title: 柠泽の博客
subtitle:
description: 专属小可爱
keywords:
author: 柠泽
language: zh-Hans
timezone:

3、修改头像

要更改的文件：主题配置文件

1. 在source 下创建 images 文件夹

2. 主题文件，修改头像路径

4. 菜单栏

要更改的文件：主题配置文件

menu:home: / || homecategories: /categories/ || tharchives: /archives/ || archivetags: /tags/ || tagsabout: /about/ || user#schedule: /schedule/ || calendar#sitemap: /sitemap.xml || sitemap#commonweal: /404/ || heartbeat

但是点击进去，却报错：Cannot GET /categories/，404 不要慌，不能获取categories，创建一个就OK！

在根目录下运行：

hexo new page 'categories' #创建categories子目录
hexo new page 'tags' #创建tags子目录
hexo new page 'about' #创建about子目录

5、搜索 Local Search

要更改的文件：站点配置文件，主题配置文件

1. 在根目录下运行：

添加百度/谷歌/本地自定义站点内容搜索，安装 hexo-generator-searchdb

npm install hexo-generator-searchdb --save

2. 站点文件，新增以下内容到任意位置：

search:path: search.xmlfield: postformat: htmllimit: 10000

3. 主题文件，启用本地搜索功能：

# Local search
local_search:enable: true

6、设置侧栏

1. 设置侧栏的位置

left - 靠左放置
right - 靠右放置

2. 设置侧栏显示的时机

post - 默认行为，在文章页面（拥有目录列表）时显示
always - 在所有页面中都显示
hide - 在所有页面中都隐藏（可以手动展开）
remove - 完全移除

推荐使用默认，刚刚又改回来了

二、特效美化

1. 动态背景

要更改的文件：主题配置文件

设置为 true 即可，推荐使用 canvas_nest

2. 添加顶部加载条

编辑 themes/hexo-theme-next/layout/_partials/head.swig

<script src="//cdn.bootcss.com/pace/1.0.2/pace.min.js"></script>
<link href="//cdn.bootcss.com/pace/1.0.2/themes/pink/pace-theme-flash.css" rel="stylesheet">
<style>.pace .pace-progress {background: #1E92FB; /*进度条颜色*/height: 1px;}.pace .pace-progress-inner {box-shadow: 0 0 10px #1E92FB, 0 0 5px     #1E92FB; /*阴影颜色*/}.pace .pace-activity {border-top-color: #1E92FB;    /*上边框颜色*/border-left-color: #1E92FB;    /*左边框颜色*/}
</style>

3. 点击出现心形效果

编辑 themes/hexo-theme-next/layout/_layout.swig ，在末尾添加以下代码，小编未使用

js 文件如下：

!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);

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

三、页面美化

0. 在右上角或者左上角实现 fork me on github

两个地址提供选择：Ribbons 、Corners

<a href="https://github.com/you"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_gray_6d6d6d.png" alt="Fork me on GitHub"></a>

1. 编辑 themes/hexo-theme-next/layout/_layout.swig

2. 放入到 <div class="headband"></div> 后面

3. 并把 href 改为自己的 Github 地址

1. 侧边栏社交小图标

要更改的文件：主题配置文件

图标库，将图标名字复制在如下位置

GitHub（显示的名称）：http://github.com/LOVELINESSLYT （跳转的链接）|| github（图标名字）

2. 修改网页底部的桃心

自定义图标，但会受分辨率的影响

Icon 图标库，将下载好的图片放入 source/images 下，推荐下载 16x16 或 18x18 的

编辑 themes/hexo-theme-next/layout/_partials/footer.swig

3. 添加可爱的 Live 2D 模型

要更改的文件：站点配置文件

1. 安装 live2d

npm install --save hexo-helper-live2d

2. 模型列表 - 模型预览

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

3. 安装模型

npm install live2d-widget-model-koharu

4. 修改文件，在最后面加入：

# Live2D
## https://github.com/EYHN/hexo-helper-live2d
live2d:enable: truescriptFrom: local # 默认pluginRootPath: live2dw/pluginJsPath: lib/pluginModelPath: assets/ # 模型文件相对与插件根目录路径tagMode: falsedebug: falsemodel:use: live2d-widget-model-koharu# use: live2d-widget-model-hibiki# use: live2d-widget-model-z16scale: 1hHeadPos: 0.5vHeadPos: 0.618display:superSample: 2width: 100height: 175# position: leftposition: righthOffset: 0vOffset: 0mobile:show: truescale: 0.5react:opacityDefault: 0.7opacityOnHover: 0.2

4. 配置访问统计

要更改的文件：主题配置文件

找到enable: false 改成enable: true

# Show PV/UV of the website/page with busuanzi.
# Get more information on http://ibruce.info/2015/04/04/busuanzi/
busuanzi_count:# count values only if the other configs are falseenable: true# custom uv span for the whole sitesite_uv: truesite_uv_header: <i class="fa fa-user"></i> 访问人数site_uv_footer:# custom pv span for the whole sitesite_pv: truesite_pv_header: <i class="fa fa-eye"></i> 总访问量site_pv_footer:# custom pv span for one page onlypage_pv: truepage_pv_header: <i class="fa fa-file-o"></i> 阅读数page_pv_footer:

5. 主页文章添加阴影效果

打开 themes/hexo-theme-next/source/css/_custom/custom.styl 向里面加入：

// 主页文章添加阴影效果.post {margin-top: 60px;margin-bottom: 60px;padding: 25px;-webkit-box-shadow: 0 0 5px rgba(202, 203, 203, .5);-moz-box-shadow: 0 0 5px rgba(202, 203, 204, .5);}

6. 文章字数统计与阅读时间

要更改的文件：主题配置文件

1. 安装

npm install hexo-wordcount --save

2. 修改

# Post wordcount display settings
# Dependencies: https://github.com/willin/hexo-wordcount
post_wordcount:item_text: truewordcount: truemin2read: true

7. 让页脚的心脏图标跳动起来

1. 编辑 themes/hexo-theme-next/layout/_partials/footer.swig ，改为：

  <span class="with-love" id="heart"><i class="fa fa-heartbeat" aria-hidden="true"></i></span>

2. 编辑 themes/hexo-theme-next/source/css/_custom/custom.styl ，在后面添加以下：

RGB颜色查询对照表，可以自己选择颜色

// 自定义页脚跳动的心样式
@keyframes heartAnimate {0%,100%{transform:scale(1);}10%,30%{transform:scale(0.9);}20%,40%,60%,80%{transform:scale(1.1);}50%,70%{transform:scale(1.1);}
}
#heart {animation: heartAnimate 1.33s ease-in-out infinite;
}
.with-love {color: #FF00FF;
}

效果如下，其实是动态的，嫌麻烦就截图了：

8. 设置首页不显示全文

要更改的文件：主题配置文件

9. 修改首页文章间距

编辑 themes/hexo-theme-next/source/css/_schemes/Mist/_posts-expanded.styl ，在最后一行添加：

.posts-expand .post {margin-top: 30px;margin-bottom: 30px;
}

自己调到合适即可

10. 修改字体

要更改的文件：主题配置文件

font:enable: true# Uri of fonts host. E.g. //fonts.googleapis.com (Default)host: //fonts.css.network# Global font settings used on <body> element.global:# external: true will load this font family from host.external: truefamily: Lato# Font settings for Headlines (h1, h2, h3, h4, h5, h6)# Fallback to `global` font settings.headings:external: truefamily:# Font settings for posts# Fallback to `global` font settings.posts:external: truefamily:# Font settings for Logo# Fallback to `global` font settings.# The `size` option use `px` as unitlogo:external: truefamily:size:# Font settings for <code> and code blocks.codes:external: truefamily: Iosevkasize: 12

四、第三方插件集成

1. 回复功能 Valine

从零开始的个人博客，next添加Valine评论功能

2. 统计功能 LeanCloud

为NexT主题添加文章阅读量统计功能

3. 后台管理 Hexo-Admin

npm i hexo-admin --save

Hexo - Next - Mist 风格主题的美化（二）相关推荐

hexo（butterfly）蝴蝶主题+个性美化
文章目录一.前言二.蝴蝶主题 1.快速入门 2.valine评论移植 3.文章移植三.个性美化 1.boyui对话框式简介页面 2.说说动态页面 3.友链页面优化一.前言这两天心血来潮给自己 ...
riplus子主题极致美化。Riplus子主题QIW主题二开美化主题免费下载
本主题原创作者为:js.qiw.net 本主题在原主题上增加的功能列表 2022-10 2022-09-19日更新新增手机端菜单(原版没有), - 1,新增移动端酷炫搜索框(解决单调空洞) 2,新增 ...
hexo博客yilia-plus主题更换Beaudar评论插件
文章目录 hexo博客yilia-plus主题更换Beaudar评论插件一.安装Beaudar app. 二.添加到主题中 1.直接拉取仓库到本地. 2. 自己进行配置三. 一些问题 hexo博客 ...
hexo博客yilia主题如何自定义个人博客的背景图片
hexo博客yilia主题博客背景的设置个人博客系列文章目录 hexo博客yilia主题所有文章模块缺失最新解决方案 hexo+yilia博客报错post.categories forEach ...
hexo 菜单_Hexo 自定义主题和菜单
Hexo 自定义主题和菜单发布时间:2019-01-02 16:22, 浏览次数:944 , 标签: Hexo 文章目录 * 一.更换 Hexo 主题及样式 * 1.默认主题 * 2.更换主题 * ...
体验一次Mac Win10主题——Win10美化之路
MAC Win10主题--Win10美化之路偶遇致美化一次偶然的机会,在网上看到了致美化这个网站,好奇怎样给Windows 10换主题.Windows系统的界面风格虽然比较高效.不过UI界面是真 ...
记录6年时间3套easyui前端框架主题皮肤美化的设计历程
沉寂了许久,是该发点东西了,要不然2023年都要过去一半了 ! 第一次接触Easyui前端框架,还是在2016年的时候,有个美化easyui界面的需求,自己是设计师,前端知识也只会最基本的html和c ...
安卓手机主题软件_资源|一款安卓实现苹果ios风格主题软件
手持安卓机的我,有时候也想体验体验苹果iOS桌面. 虽然可以通过下载苹果的壁纸/图标来美化,不过桌面布局还是得用第三方启动器来实现. 啼咪给大家带来一款安卓实现苹果iOS风格主题软件:X桌面 X桌面介 ...
用hexo中的matery主题搭建个人博客（完整版）
1.初始化搭建: 使用 gitee | github + hexo 快速搭建 hexo-theme-matery 闪烁之狐主题の个人博客_扶摇而上者九万里的博客-CSDN博客注意:gitee搭建需要 ...

Hexo - Next - Mist 风格主题的美化（二）

一、基本美化

0. 更换主题风格

1. 语言

2. 基本信息修改

3、修改头像

4. 菜单栏

5、搜索 Local Search

6、设置侧栏

二、特效美化

1. 动态背景

2. 添加顶部加载条

3. 点击出现心形效果

三、页面美化

0. 在右上角或者左上角实现 fork me on github

1. 侧边栏社交小图标

2. 修改网页底部的桃心

3. 添加可爱的 Live 2D 模型

4. 配置访问统计

5. 主页文章添加阴影效果

6. 文章字数统计与阅读时间

7. 让页脚的心脏图标跳动起来

8. 设置首页不显示全文

9. 修改首页文章间距

10. 修改字体

四、第三方插件集成

1. 回复功能 Valine

2. 统计功能 LeanCloud

3. 后台管理 Hexo-Admin

Hexo - Next - Mist 风格主题的美化（二）相关推荐

最新文章

热门文章