原文链接https://www.lixint.me/hexo-theme-diy.html

欢迎加入博客搭建交流群（QQ群号60429576）>点击加入<

写在最前面：
1.在修改时请注意博客配置文件与主题配置文件的区别：博客配置文件是指博客根目录下的_config.yml文件，
主题配置文件是指/themes/主题名/路径下的_config.yml文件，例如我使用的主题为next主题，主题配置文件为/themes/next/_config.yml。
2.文内所有命令行命令全部是在博客根目录打开命令行下输入的。根目录下目录结构为：

.
├── _config.yml
├── package.json
├── scaffolds
├── source
|   ├── _drafts
|   └── _posts
└── themes

默认情况下，命令行输入命令ls显示如下：


设置作者头像	设置作者昵称与站点描述	设置代码高亮主题	侧边栏社交链接
开启打赏功能	修改打赏字体不闪动	开启友情链接or侧边栏推荐阅读	设置RSS
设置网站图标	实现全站及文章字数统计及阅读时长	添加顶部加载条	自定义鼠标样式
实现点击出现桃心	修改网页底部的小图标	去掉页面底部的强力驱动信息及设置备案信息	添加动态背景
增加波浪背景动画	在右上角实现fork me on github按钮	增加回到顶部按钮及显示当前浏览进度	修改顶部菜单与下方信息栏的间隙大小
网站标题栏背景颜色	为博客加上萌萌的	添加DaoVoice实现在线联系	主页文章添加阴影效果
增加本地搜索功能	修改语言	修改菜单及创建分类页	修改主题风格

主题选择

可以到Nexo官方主题页选择自己喜欢的主题，每个主题的使用方法略有不同，所以如果你是跟我一样的小白，建议使用流行热门的主题，这样出现问题网上基本都可以搜到解决方法。
推荐Next主题，我的博客使用的就是Next的主题

Next主题修改

主题安装

Next主题文档页面
目前Next主题的项目分成了两个项目，一个是5.1.4版本以下的，一个是一直更新的，现在已经更新到了6.5，建议直接用最新的，最新版本的主题已经把很多常用的功能集成了，用起来很方便。本篇文章是基于Next 6.5进行的修改与展示。
Next主题项目页面(v5.1.4)
v6.5版本页面
方法1：项目页面点击releases，找到最新版本的主题zip包并下载，解压放到博客根目录/themes重命名文件夹为next，两版本通用。

方法2：博客根目录打开命令行，用5.1版本输入命令

git clone https://github.com/iissnan/hexo-theme-next themes/next

6.5版本输入命令：

git clone https://github.com/theme-next/hexo-theme-next themes/next

安装完成后，打开博客配置文件修改最上方的theme项为next。

主题配置文件是根目录/themes/next目录下的_config.yml文件。
修改完成后命令行输入hexo s本地运行一下看是否生效。

主题修改

修改语言

修改博客配置文件下的language项为zh-CN

这里要注意一下，看一下主题文件夹内的languange文件夹中中文的配置文件叫什么名字，Next主题有些版本的叫zh-Hans那这里就填zh-Hans，Next最新版本中用的是zh-CN，故这里填写zh-CN

修改菜单及创建分类页

修改主题配置文件下的menu项，按需要打开菜单。例如我需要把标签页面打开，就把tags项前面的#去掉就行了。

Hexo s运行一下可以看到菜单多了一个标签项。但是此时还不行，只是有了入口。点击标签菜单，会显示：

因为只有了入口，但还没有标签页面，需要在命令行输入如下命令：hexo new page tags新建出标签页。

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

修改主题风格

Next自带四种主题风格，可以在主题配置文件搜索Scheme项，将需要的风格前的#去掉，注意只能开启一个风格。

设置作者头像

编辑主题配置文件，搜索修改字段 avatar，值设置成头像的链接地址。可以设置成在线的图片地址。也可以把图片放在本地。
方法1：
在线图片设置：现在有一张网络图片，使用百度上随便搜的。

方法2：
本地设置：放置在source/images目录下，设置为url: /images/avatar.jpg

这个rounded项可以设置头像为圆形，设置为ture后会自动根据头像的尺寸将头像变化为圆形或者椭圆，头像图片为正方形的话则为圆形。长方形的话长宽相差越大，椭圆越明显。
设置opacity的值控制头像的透明度，值为0 - 1。
rotated项为头像旋转，设置为true，则鼠标指到头像时头像会旋转。

设置作者昵称与站点描述

这个比较简单。设置博客配置文件中的author为昵称，description为描述。
同理，subtitle为副标题，keywords为关键词，timezone为时区，可以按需求填写。

设置代码高亮主题

NexT 使用 Tomorrow Theme作为代码高亮，共有5款主题供你选择。 NexT 默认使用的是白色的 normal 主题，可选的值有 normal，night， night blue， night bright， night eighties
更改 主题配置文件中的highlight_theme 字段，将其值设定成你所喜爱的高亮主题即可。

侧边栏社交链接

侧栏社交链接的修改包含两个部分，配置在 主题配置文件 中。social字段为连接，格式为显示文本: 链接地址 || Font Awesome图标名称
例如：

图标名称 是 Font Awesome 图标的名字（不必带 fa- 前缀）。enable 选项用于控制是否显示图标，你可以设置成 false 来去掉图标。例如: 百度: https://baidu.com || firefox
Font Awesome图标可以到Font Awesome查看

开启打赏功能

主题自带支付宝跟微信及比特币打赏功能，只需要主题配置文件 中填入 微信和 支付宝 收款二维码图片地址即可开启该功能。
搜索reward字段，将wechatpay及alipay字段前面的#去掉即可。在source文件夹中放置支付宝跟微信收款码并修改文件名字即可。reward_comment自带为打赏按钮上方的文字，不需要的话可以在前面加#注释掉。

修改打赏字体不闪动

鼠标一指就疯狂抖动。

修改文件next/source/css/_common/components/post/post-reward.styl，然后注释其中的函数#QR > div:hover p函数即可。css文件注释用/* 和 */ 包裹代码即可。

这个post-reward.styl文件是跟按钮及图片相关的，如果需要修改关于打赏的其他属性，例如按钮大小，样式，图片大小等，都可以修改post-reward.styl文件实现。我也不太懂。在这就不展开讲了。有兴趣的可以网上搜css的语法自己尝试改。

开启友情链接 or 侧边栏推荐阅读

主题配置文件 中搜索links_title字段，修改links_icon、links_title、links_layout、links四个字段的内容实现自定义风格。
link_icon是title前面的图标，用法跟之前的社交链接的图标用法是一样的，用Font Awesome图标。
links_title为标题，如果是作为友情链接使用，可以设置为
links_title: 友情链接
在links字段设置友情链接名字及链接

links:友联1: http://example.com/友联2: http://example.com/

例如：

links:谷歌: https://google.com/百度: http://baidu.com/

links_layout为各个友情链接的布局，默认是block，也可以用#注释掉这一行用下一行的inline布局。

这个模块的自由度比较高，可以用来放置友情链接，也可以放置推荐阅读。

设置 RSS

NexT 中 RSS 有三个设置选项，满足特定的使用场景。更改主题配置文件，设定 rss 字段的值：

false：禁用 RSS，不在页面上显示 RSS 连接。

留空：默认就是留空的，使用 Hexo 生成的 Feed 链接。你可以需要先安装 hexo-generator-feed 插件。

安装方法：根目录下命令行输入npm install hexo-generator-feed --save

具体的链接地址：适用于已经烧制过Feed的情形。
建议直接使用插件，比较省事。

设置网站图标

在EasyIcon中分别找一张（16 * 16与32 * 32）的ico图标,或者去别的网站下载或者制作，并将图标名称改为favicon16.ico与favicon32.ico，然后把图标放在/themes/next/source/images或者放在根目录的/source/images文件夹里。
在主题配置文件内搜索favicon字段，把 small、medium字段的地址修改为/images/favicon16.ico 与 /images/favicon32.ico

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

根目录命令运行

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

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

symbols_count_time:symbols: truetime: truetotal_symbols: truetotal_time: true

重新hexo s看一下，文章页面已经有字数跟阅读时长的统计了。网站底部也显示了网站总字数跟总阅读时长。

添加顶部加载条

最新版本的Next主题是内置了加载条功能的。
根目录打开命令行，输入如下命令：

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

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

自定义鼠标样式

打开themes/next/source/css/_custom/custom.styl,在里面写下如下代码

// 鼠标样式* {cursor: url("http://om8u46rmb.bkt.clouddn.com/sword2.ico"),auto!important}:active {cursor: url("http://om8u46rmb.bkt.clouddn.com/sword1.ico"),auto!important}

在EasyIcon中找一张16 * 16的ico图，放在/source/images/中，修改上述代码中的链接为/images/xxx.ico，如果不放在本地的话，可以把图片放在图床，直接替换链接即可。
第一行的链接是默认状态下的鼠标样式，第二行的是鼠标按下时的样式。

实现点击出现桃心以及爆炸效果

1.在/themes/next/source/js/src下新建文件love.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);

建一个叫fireworks.js的文件并写入如下代码：

"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)};

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

  {% if theme.fireworks && not theme.love %}<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 %}{% if theme.love && not theme.fireworks %}<script type="text/javascript" src="/js/src/love.js"></script>{% endif %}

最后在主题配置文件最下方加入如下代码：

# Fireworks and love
fireworks: true
love: false

fireworks是爆炸效果，love是心形效果。两个不能同时开。

修改网页底部的小图标

主题配置文件搜索footer字段，修改下方的icon字段下的name字段。name字段后的名字是 Font Awesome 图标的名字（不必带 fa- 前缀）。

animated自动为闪动开关，设置为true后图标会闪动。
以及可以设置图标颜色，color处填入16进制颜色代码即可。注意保留原来的双引号。

去掉页面底部的强力驱动信息及设置备案信息

主题配置文件搜索copyright字段，修改powered下的enable字段的true为false即可去掉强力驱动部分的内容。

同样的theme下的enable设置为false的话可以去掉页面底部的主题信息。

enable设置为true，version设置为false的话，则不显示版本号。

如果博客有备案的话，下方beian字段设置为true，icp后填写备案号。

添加动态背景

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

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

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

其他配置项说明：

color ：线条颜色, 默认: '0,0,0'；三个数字分别为(R,G,B)
opacity: 线条透明度（0~1）, 默认: 0.5
count: 线条的总数量, 默认: 150
zIndex: 背景的z-index属性，css属性用于控制所在层的位置, 默认: -1
onmobile：是否在手机端显示。

增加波浪背景动画

根目录打开命令行，输入

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

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

three_waves、canvas_lines、canvas_sphere三个的效果各不相同，可以自己尝试一下选一个喜欢的。

在右上角实现fork me on github按钮

最新的Next主题已经内置了增加右上角的Fork me on github按钮功能，只需要在主题配置文件搜索github_banner字段，去掉前面的#，把||前面的github链接替换成自己的即可。

||后的参数为按钮的title，为鼠标指在按钮上时显示的文本。

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

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

将下方的scrollpercent字段设置为true即可实现当前浏览进度的显示。

修改顶部菜单与下方信息栏的间隙大小

主题配置文件搜索offset字段，将offset的像素数大小设置为需要的值，默认为12。

网站标题栏背景颜色

打开 themes/next/source/css/_custom/custom.styl ,在里面写下如下代码：

// 网站标题栏背景颜色
.site-meta {background: #FF0033; //修改为自己喜欢的颜色
}

颜色的值可以自行网上搜索16进制颜色进行修改。

为博客加上萌萌的

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

# Live2D
## https://github.com/xiazeyu/live2d-widget.js
## https://l2dwidget.js.org/docs/class/src/index.js~L2Dwidget.html#instance-method-init
live2d:model:scale: 1hHeadPos: 0.5vHeadPos: 0.618display:superSample: 2width: 150height: 300position: righthOffset: 0vOffset: -20mobile:show: truescale: 0.5react:opacityDefault: 0.7opacityOnHover: 0.2

更多设置可以查看官方文档

添加DaoVoice 实现在线联系

本功能可以实现在线留言，作者会收到邮件，如果绑定了微信，作者还会收到微信通知。
首先到DaoVoice注册一个Daovioce账号。
注册完成后会进到DaoCloud，重新访问连接即可。进到Daovoice面板，点击左侧边栏的应用设置-- 安装到网站。在下方的代码中会看到app_id: "xxxx"字样。

打开 themes/next/layout/_partials/head/head.swig 文件中最下方加入如下代码：

{% if theme.daovoice %}<script>(function(i,s,o,g,r,a,m){i["DaoVoiceObject"]=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;a.charset="utf-8";m.parentNode.insertBefore(a,m)})(window,document,"script",('https:' == document.location.protocol ? 'https:' : 'http:') + "//widget.daovoice.io/widget/0f81ff2f.js","daovoice")daovoice('init', {app_id: "{{theme.daovoice_app_id}}"});daovoice('update');</script>
{% endif %}

在主题配置文件 _config.yml，添加如下代码：

# DaoVoice
daovoice: true
daovoice_app_id: 这里输入前面获取的app_id

回到Daovoice控制面板，点击聊天设置可以对聊天图标的颜色及位置进行设置。

最后到右上角选择管理员，微信绑定，可以绑定你的微信号。这样收到消息后可以通过小程序进行回复。

主页文章添加阴影效果

打开\themes\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);}

可以自行修改代码来修改阴影效果。

增加本地搜索功能

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

npm install hexo-generator-searchdb --save

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

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

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

# Local search
local_search:enable: true

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

未完待续

Hexo博客主题安装及Next主题个性化修改相关推荐

Windows下使用GitHub Pages搭建hexo博客详细教程以及Next主题超全配置
根据下面的教程搭建的博客见这里前言马上要进入研究生了,不能再过浑浑噩噩的日子了,搭建一个小网站,用于记录自己所学的东西.其实,之前在腾讯云1元乞丐版上也搭建过博客,但是呢,只用来扯淡了.这次使用 ...
Hexo博客进阶：为Next主题添加Valine评论系统
文章目录前言根据读者反馈,Valine 评论系统在 Next 主题高版本 (7.+) 以上没有内置,且 Valine 已经很久没有更新维护了.如果想要配置体验 Valine 的,建议使用 Next ...
Hexo博客优化：在Next主题中设置进阶版Live2D看板娘————拒绝踩坑！！！！
最初级的用法使用官方包安装,安装非常简单,但效果一般 hexo live-2d地址:https://github.com/xiazeyu/live2d-widget-models git命令行中输入 ...
Hexo 博客自定义一个不使用主题模板渲染的独立页面
Hexo 是一个轻量.快速,简单和强大的博客框架,当我们需要发布博文的时候,只需要将写好的文章(MarkDown文件)放入本地的 \source\_posts 文件夹,然后再推送上去就行了,原理就是当 ...
hexo博客yilia主题如何自定义个人博客的背景图片
hexo博客yilia主题博客背景的设置个人博客系列文章目录 hexo博客yilia主题所有文章模块缺失最新解决方案 hexo+yilia博客报错post.categories forEach ...
Hexo 博客导流微信公众号
本文首发于 Clay 的技术博客前言 Hexo 博客建议安装 hexo-readmore 插件,将 TechGrow 的免费微信公众号导流工具整合到博客中,用户扫码关注微信公众号后可以解锁全站文章, ...
从 0 开始搭建 Hexo 博客
欢迎访问我的 hexo 博客 :https://guoshizhan.github.io 前言:本教程使用的是 Windows 操作系统,所使用的编辑软件是 notepad++,不要使用记事本或者 E ...
阿里云部署hexo博客之旅
hexo+阿里云(centos7.x)+git 前言由于之前的服务器到期了没续费,忘记备份转移了所以资源都没有了,还好本机有一些,之后会上传的只能重新写了拥有个人的博客是每个程序员的想法,我也一样 ...
Hexo 博客优化之实用功能添加系列（持续更新）
2022-01-25 更新:博客新地址:https://www.itbob.cn/,文章距上次编辑时间较远,部分内容可能已经过时! 本文将讲述一些 Hexo 博客实用功能的添加,本文以作者 luuma ...
hexo博客出现“Cannot GET/xxxx”的错误
最近在github上搭了一个hexo博客系统,非常轻量级的,只需要几句nodejs命令就搭建完成了.我了解了一下,hexo博客是基于nodejs写的,采用ejs模板引擎编写页面. 因为默认的主题风格不 ...

Hexo博客主题安装及Next主题个性化修改

目录

主题选择

Next主题修改

主题安装

主题修改

修改语言

修改菜单及创建分类页

修改主题风格

设置作者头像

设置作者昵称与站点描述

设置代码高亮主题

侧边栏社交链接

开启打赏功能

修改打赏字体不闪动

开启友情链接 or 侧边栏推荐阅读

设置 RSS

设置网站图标

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

添加顶部加载条

自定义鼠标样式

实现点击出现桃心以及爆炸效果

修改网页底部的小图标

去掉页面底部的强力驱动信息及设置备案信息

添加动态背景

增加波浪背景动画

在右上角实现fork me on github按钮

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

修改顶部菜单与下方信息栏的间隙大小

网站标题栏背景颜色

为博客加上萌萌的

添加DaoVoice 实现在线联系

主页文章添加阴影效果

增加本地搜索功能

未完待续

Hexo博客主题安装及Next主题个性化修改相关推荐

最新文章

热门文章

Hexo博客主题安装及Next主题个性化修改

目录

主题选择

Next主题修改

主题安装

主题修改

修改语言

修改菜单及创建分类页

修改主题风格

设置作者头像

设置作者昵称与站点描述

设置代码高亮主题

侧边栏社交链接

开启打赏功能

修改打赏字体不闪动

开启友情链接 or 侧边栏推荐阅读

设置 RSS

设置网站图标

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

添加顶部加载条

自定义鼠标样式

实现点击出现桃心 以及 爆炸效果

修改网页底部的小图标

去掉页面底部的强力驱动信息及设置备案信息

添加动态背景

增加波浪背景动画

在右上角实现fork me on github按钮

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

修改顶部菜单与下方信息栏的间隙大小

网站标题栏背景颜色

为博客加上萌萌的

添加DaoVoice 实现在线联系

主页文章添加阴影效果

增加本地搜索功能

未完待续

Hexo博客主题安装及Next主题个性化修改相关推荐

最新文章

热门文章

实现点击出现桃心以及爆炸效果