最详细的Next主题构造

最新推荐文章于 2024-06-26 16:25:07 发布

Ldy-ly

最新推荐文章于 2024-06-26 16:25:07 发布

阅读量1.9k

点赞数 5

分类专栏：【 Hexo 博客搭建】

本文链接：https://blog.csdn.net/qq_42289214/article/details/106389401

版权

【 Hexo 博客搭建】专栏收录该内容

2 篇文章 0 订阅

订阅专栏

首先执行命令，之后把前期准备做好，否则后面会出现毛病。

hexo init
cnpm install --save hexo-deployer-git
npm install
git init

目录导航

一、根目录下的配置文件
二、主题配置文件

一、根目录下的配置文件

1、下载next主题，及更改主题

下载zip压缩包点击这里
解压后放入themes目录下，并改名为next
修改根目录配置文件

2、更改语言

看主题的中文格式，去下面文件夹看

发现中文格式为zh-CN
修改根目录配置文件

3、设置作者与站点描述

修改根目录的配置文件
在这里插入图片描述

4、增加本地搜索功能(插件)

①、安装插件,如下图

cnpm install hexo-generator-searchdb --save

在这里插入图片描述
②、修改根目录配置文件，新增以下内容到任意位置

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

③、修改主题配置文件，搜索local_search模块
在这里插入图片描述

5、统计全站及文章字数及阅读时长（目前有错）（插件）

①、安装插件，如下图

cnpm install hexo-symbols-count-time --save

在这里插入图片描述
②、修改根目录配置文件，添加以下内容。

symbols_count_time:
  symbols: true
  time: true
  total_symbols: true   #这两行是全站统计，可以填false
  total_time: true

发现有问题
在这里插入图片描述

6、添加卡通人物（插件）

点击这里,参考官方文档，里面有中文说明
①、首先安装插件

cnpm install --save hexo-helper-live2d

②、选则模型下载

cnpm install live2d-widget-model-hibiki
# cnpm install ive2d-widget-model-koharu

②、修改根目录配置文件，在最下面加入

# Live2D
## https://github.com/xiazeyu/live2d-widget.js
## https://l2dwidget.js.org/docs/class/src/index.js~L2Dwidget.html#instance-method-init
live2d:
  enable: true
  scriptFrom: local
  pluginRootPath: live2dw/
  pluginJsPath: lib/
  pluginModelPath: assets/
  tagMode: false
  log: false
  model:
    use: live2d-widget-model-hibiki    #修改为自己下载的模型名称
  display:
    position: left
    width: 150
    height: 300
  mobile:
    show: true
  react:
    opacity: 0.7

7、静态资源压缩（插件）（有问题）

①、安装插件：

cnpm install hexo-neat --save-dev

②、修改根目录配置文件，添加以下内容：

# hexo-neat
# 博文压缩
neat_enable: true
# 压缩html
neat_html:
 enable: true
 exclude:
# 压缩css  
neat_css:
 enable: true
 exclude:
   - '**/*.min.css'
# 压缩js
neat_js:
 enable: true
 mangle: true
 output:
 compress:
 exclude:
   - '**/*.min.js'
   - '**/jquery.fancybox.pack.js'
   - '**/index.js'

二、主题配置文件

1、增加菜单的分类，及创建它们的页面

修改主题配置文件，menu模块，去掉#即可，可以调换顺序
创建各自对应的页面

hexo new page about
hexo new page tags
new page categories

在发表文章是开头加上对应menu字段

①、自己可以在menu添加自定义菜单及菜单图标
②、hexo new page 自定义菜单名
③、在themes/next/languages/zh-CN.yml文件中menu模块添加对应名称及中文名

2、换主题风格

修改主题配置文件，找到 Scheme，差别不大

3、设置作者头像

修改主题配置文件，找到avatar，将地址换位本地或网上的都行。
本地设置：
①.在根目录的source新建images文件夹，然后把图片放入。
在这里插入图片描述
②. 修改主题配置文件。
rounded是变圆
rotated根据鼠标滚动

4、增加社交链接

修改主题配置文件，找到social模块。
格式为：显示文本: 链接地址 || Front Awesome图标名称
注：Front Awesome链接图标名称不必带fa- 前缀
在这里插入图片描述

5、打赏功能

修改主题配置文件,搜索reward模块
①、将支付截图保存在根目录下的source/images中
②、修改主题配置文件
注：animation：文字会跳动
在这里插入图片描述

6、开启侧边友情链接

修改主题配置文件，搜索Blog rolls模块
在这里插入图片描述

7、设置网站图标

①、在Easylcon中分别找一张（1616与3232）的ico图标。或者去别的网站下载，并改为xxx16.ioc和xxx32.ico，然后把图标放到根目录下的source/images
在这里插入图片描述
②、修改主题配置文件，搜索favicon模块

8、增添加载条

①、下载进度条文件

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

②、修改主题配置文件，搜索pace模块，根据列出的，选一个写在theme后
在这里插入图片描述

9、修改网站底部小图标

修改主题配置文件，搜索icon模块，修改name后为Front Awesome。

注：animated为闪动
color网上找16进制代码，加“ ”

在这里插入图片描述

10、去掉网页Hexo自带底部信息

修改主题配置文件，搜索copyright模块。
在这里插入图片描述

11、增加彩带、背景动图、背景动画

增加彩带
①、输入以下指令

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

②、修改主题配置文件，搜索canvas_ribbon模块
在这里插入图片描述

增加背景动图
①、在根目录下的source文件中若没有_data目录则创建，然后在此目录下创建footer.swig文件。

并输入以下内容

<script color="0,0,255" opacity="0.7" zIndex="-1" count="99" src="https://cdn.jsdelivr.net/npm/canvas-nest.js@1/dist/canvas-nest.js"></script>

②、修改主题配置文件，搜索custom_file_path部分，去掉注释
在这里插入图片描述

增加背景动画
①、输入以下命令

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

②、修改主题配置文件，搜索JavaScript 3D，三个选一个，第二个加载较快
在这里插入图片描述

12、右上角实现github按钮

修改主题配置文件，搜索github_banner。
在这里插入图片描述
发现文章右上角

13、显示当前浏览进度

注意此功能只能用于Pisces和Gemini主题

修改主题配置文件，搜索bt2模块
在这里插入图片描述

14、增加爆炸效果

①、创建路径：themes/next/source/js/src/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 %}
   <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 %}

③、修改主题配置文件，最后面添加以下代码：

# Fireworks
fireworks: true

15、添加文章结束语

①、创建路径：\themes\next\layout\_macro\passage-end-tag.swig,添加以下内容：

<div>
    {% if not is_index %}
        <div style="text-align:center;color: #ccc;font-size:14px;">-------------本文已结束<i class="fa fa-hourglass-end"></i>非常感谢您的阅读-------------</div>
    {% endif %}
</div>

②、修改==\themes\next\layout\_macro\post.swig==，在END POST BODY后添加以下代码：

<div>
  {% if not is_index %}
    {% include 'passage-end-tag.swig' %}
  {% endif %}
</div>

在这里插入图片描述
③、修改主题配置文件，最下面添加：

# 文章末尾添加“本文结束”标记
passage_end_tag:
  enabled: true

16、添加版权信息

修改主题配置文件，搜索creative_commons模块
在这里插入图片描述

17、404页面创建

①、根目录下创建404页面

hexo new page 404

②、在根目录下的source/404/index.md,添加以下代码:

---
title: 404
date: 2020-05-28 17:37:33
---
<!DOCTYPE HTML>
  <html>
  <head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8;"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="robots" content="all" />
    <meta name="robots" content="index,follow"/>
    <link rel="stylesheet" type="text/css" href="https://qzone.qq.com/gy/404/style/404style.css">
  </head>
  <body>
    <script type="text/plain" src="http://www.qq.com/404/search_children.js"
            charset="utf-8" homePageUrl="https://ldysdy999.github.io"  #填自己的博客地址
            homePageName="回到我的主页">
    </script>
    <script src="https://qzone.qq.com/gy/404/data.js" charset="utf-8"></script>
    <script src="https://qzone.qq.com/gy/404/page.js" charset="utf-8"></script>
  </body>
  </html>

③、修改themes/next/languages/zh-CN.yml中文名字公益404修改为公益
在这里插入图片描述
④、修改主题配置文件，开启menu模块的commonweal标签

18、添加网易云音乐

①、打开网易云音乐网页版,生成外连接播放器
在这里插入图片描述
复制HTML代码

②、修改themes/next/layout/_macro/sidebar.swig,添加代码如下

<div id="music163player">
  <iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=86 src="//music.163.com/outchain/player?type=2&id=1381930398&auto=1&height=66"></iframe>
</div>

添加到不同位置，播放器的位置也不同，如下：

➡、添加到开头几行
在这里插入图片描述

➡、添加到中间

➡、添加到最51行上面，注意51-—54行前千万不能分开

Ldy-ly

关注

5
点赞
踩
15

收藏

觉得还不错? 一键收藏
2
评论
最详细的Next主题构造

目录导航一、下载next主题，及更改主题二、更改语言三、增加菜单的分类，及创建它们的页面四、换主题风格五、设置作者头像六、设置作者与站点描述七、增加社交链接八、打赏功能九、开启侧边友情链接十、增加本地搜索功能（未发现作用）十一、设置网站图标十二、统计全站及文章字数及阅读时长（目前有错）十三、增添加载条一、下载next主题，及更改主题下载zip压缩包点击这里解压后放入themes目录下，并改名为next修改根目录配置文件二、更改语言看主题的中文格式，去下面文件夹看发现中文格式为zh-C
复制链接

扫一扫

专栏目录