Hexo个人博客之Next-8.20主题下载及美化

安装next主题

1. 下载next主题,cd到博客文件中npm install hexo-theme-next,下载完成后博客文件的themes文件会出现next文件,这就是

2. 记事本打开hexo中的_config.yml文件,将theme的值改为next至此next安装完成

配置及美化next

设置主题模式

• 打开next主题的配置文件:_config.yml，ctrl+f,搜索scheme,旗下的四个值即为next的四种主题模式,想用哪个主题就把那个主题的#去掉,再把不用的加上#,我用的Gemini主题模式,

• # Schemes
  #scheme: Muse
  #scheme: Mist
  #scheme: Pisces
  scheme: Gemini
  

设置菜单

在配置文件中搜索:menu

# 菜单选项设置
menu:
  home: / || fa fa-home					   # 跳转主页
  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		# 公益404
  about: /about/ || fa fa-user
# 菜单表现设置
menu_settings:
  icons: true	#选项图标是否显示
  badges: true	#菜单某选项内容的显示总数量

开启菜单:标签/分类/日程表功能

1. 建立tags/categories/schedule文件夹及其index.md文档

   hexo new page tags/categories/schedule	
   

2. 修改对应index.md文档内容(以categories举例)

   ---
   title: 分类
   date: 2024-05-15 18:38:43
   type: "categories"
   ---
   

开启社交功能:

在_config.yml中搜索social

social:
  GitHub: https://github.com/xxxxx || fab fa-github
  E-Mail: mailto:xxxxxx@qq.com || fa fa-envelope
  #Weibo: https://weibo.com/yourname || fab fa-weibo
  #Twitter: https://twitter.com/yourname || fab fa-twitter
  #FB Page: https://www.facebook.com/yourname || fab fa-facebook
  #StackOverflow: https://stackoverflow.com/yourname || fab fa-stack-overflow
  #YouTube: https://youtube.com/yourname || fab fa-youtube
  #Instagram: https://instagram.com/yourname || fab fa-instagram
  #Skype: skype:yourname?call|chat || fab fa-skype

开启阅读进度及回到顶部功能:

在_config.yml中搜索back2top

back2top:
  enable: true
  sidebar: false		# 回到顶部在侧边栏。
  scrollpercent: true	 # 以百分比的形式展示阅读进度

添加live2D看板娘

1. 下载live2d文件npm install --save hexo-helper-live2d
2. 下载live2d模型文件npm install live2d-widget-model-模型名字
   具体查看小人样式请移步https://blog.csdn.net/wang_123_zy/article/details/87181892
3. 配置hexo的_config.yml文件

	#Live2D
	live2d:
	  enable: true
	  pluginModelPath: assets/ # 模型文件相对与插件根目录路径
	  model:
	    use: live2d-widget-model-shizuku # npm-module package name
	  display:
	    position: right
	    width: 150
	    height: 300
	  mobile:
	    show: true # 手机中是否展示

添加鼠标点击特效

1. 取消next的_config.yml文件中bodyEnd的注释

2. 添加配置项

    # 鼠标点击特效
    # 鼠标点击效应: fireworks(礼花) | explosion(爆炸) | love(爱心) | text(文字)
    cursor_effect: text

3. 在next/source/_data文件下创建body-end.njk并复制以下代码

        {# 鼠标点击特效 #}
        {% if theme.cursor_effect == "fireworks" %}
          <script async src="/js/cursor/fireworks.js"></script>
        {% elseif theme.cursor_effect == "explosion" %}
          <canvas class="fireworks" style="position: fixed;left: 0;top: 0;z-index: 1; pointer-events: none;" ></canvas>
          <script src="//cdn.bootcss.com/animejs/2.2.0/anime.min.js"></script>
          <script async src="/js/cursor/explosion.min.js"></script>
        {% elseif theme.cursor_effect == "love" %}
          <script async src="/js/cursor/love.min.js"></script>
        {% elseif theme.cursor_effect == "text" %}
          <script async src="/js/cursor/text.js"></script>
        {% endif %}

4. themes/next/source/js/cursor/目录下创建特效js文件

   1. 文字点击特效(推荐),数组内文字按顺序出现,字体颜色随机

            var a_idx = 0;
            jQuery(document).ready(function($) {
              var colorNames = ["#333", "rgb(77,64,48)"/*淡松烟*/, "rgb(238,160,140)"/*淡罂粟红*/, "rgb(243,71,24)"/*榴花红*/,"rgb(32,137,77)"/*鲸鱼灰*/, "rgb(71,81,100)"/*宫殿绿*/, "red", "Fuchsia", "MediumAquamarine", "yellow", " Blue", "DarkOrange", "MediumSpringGreen", "Crimson"];
            
              $("body").click(function(e) {
                var a = ["轻轻的我走了", "正如我轻轻的来", "我轻轻的招手", "作别西天的云彩", "那河畔的金柳", "是夕阳中的新娘",
                  "波光里的艳影", "在我的心头荡漾", "软泥上的青荇", "油油的在水底招摇", "在康河的柔波里", "我甘心做一条水草!", "那榆荫下的一潭",
                  "不是清泉，是天上虹", "揉碎在浮藻间", "沉淀着彩虹似的梦", "寻梦？撑一支长篙", "向青草更青处漫溯", "满载一船星辉", "在星辉斑斓里放歌",
                  "但我不能放歌", "悄悄是别离的笙箫", "夏虫也为我沉默", "沉默是今晚的康桥!", "悄悄的我走了", "正如我悄悄的来", "我挥一挥衣袖", "不带走一片云彩"];
                var $i = $("<span/>")
                  .text(a[a_idx])
                  .css({
                    "user-select": "none", // 防止复制
                    "font-family": '"Kaiti SC", "KaiTi", "楷体", serif', // 设置楷体
                    "font-size": "16px", // 示例：设置字体大小为16像素
                    // 可以继续添加更多样式，如字体加粗、斜体等
                  });
            
                var randomColorName = colorNames[Math.floor(Math.random() * colorNames.length)];
                var x = e.pageX,
                  y = e.pageY;
            
                $i.css({
                  "z-index": 99999,
                  "top": y - 28,
                  "left": x - a[a_idx].length * 8,
                  "position": "absolute"
                });
            
                // 动态应用颜色
                setTimeout(function() {
                  $i.css("color", randomColorName);
                }, 0); // 确保颜色在元素添加到DOM后改变
            
                $("body").append($i);
                $i.animate({
                  "top": y - 180,
                  "opacity": 0
                }, 1500, function() {
                  $i.remove();
                });
            
                a_idx = (a_idx + 1) % a.length;
              });
            });
            

2. 礼炮特效

            class Circle {
              constructor({ origin, speed, color, angle, context }) {
                this.origin = origin
                this.position = { ...this.origin }
                this.color = color
                this.speed = speed
                this.angle = angle
                this.context = context
                this.renderCount = 0
              }
            
              draw() {
                this.context.fillStyle = this.color
                this.context.beginPath()
                this.context.arc(this.position.x, this.position.y, 2, 0, Math.PI * 2)
                this.context.fill()
              }
            
              move() {
                this.position.x = (Math.sin(this.angle) * this.speed) + this.position.x
                this.position.y = (Math.cos(this.angle) * this.speed) + this.position.y + (this.renderCount * 0.3)
                this.renderCount++
              }
            }
            
            class Boom {
              constructor ({ origin, context, circleCount = 16, area }) {
                this.origin = origin
                this.context = context
                this.circleCount = circleCount
                this.area = area
                this.stop = false
                this.circles = []
              }
            
              randomArray(range) {
                const length = range.length
                const randomIndex = Math.floor(length * Math.random())
                return range[randomIndex]
              }
            
              randomColor() {
                const range = ['8', '9', 'A', 'B', 'C', 'D', 'E', 'F']
                return '#' + this.randomArray(range) + this.randomArray(range) + this.randomArray(range) + this.randomArray(range) + this.randomArray(range) + this.randomArray(range)
              }
            
              randomRange(start, end) {
                return (end - start) * Math.random() + start
              }
            
              init() {
                for(let i = 0; i < this.circleCount; i++) {
                  const circle = new Circle({
                    context: this.context,
                    origin: this.origin,
                    color: this.randomColor(),
                    angle: this.randomRange(Math.PI - 1, Math.PI + 1),
                    speed: this.randomRange(1, 6)
                  })
                  this.circles.push(circle)
                }
              }
            
              move() {
                this.circles.forEach((circle, index) => {
                  if (circle.position.x > this.area.width || circle.position.y > this.area.height) {
                    return this.circles.splice(index, 1)
                  }
                  circle.move()
                })
                if (this.circles.length == 0) {
                  this.stop = true
                }
              }
            
              draw() {
                this.circles.forEach(circle => circle.draw())
              }
            }
            
            class CursorSpecialEffects {
              constructor() {
                this.computerCanvas = document.createElement('canvas')
                this.renderCanvas = document.createElement('canvas')
            
                this.computerContext = this.computerCanvas.getContext('2d')
                this.renderContext = this.renderCanvas.getContext('2d')
            
                this.globalWidth = window.innerWidth
                this.globalHeight = window.innerHeight
            
                this.booms = []
                this.running = false
              }
            
              handleMouseDown(e) {
                const boom = new Boom({
                  origin: { x: e.clientX, y: e.clientY },
                  context: this.computerContext,
                  area: {
                    width: this.globalWidth,
                    height: this.globalHeight
                  }
                })
                boom.init()
                this.booms.push(boom)
                this.running || this.run()
              }
            
              handlePageHide() {
                this.booms = []
                this.running = false
              }
            
              init() {
                const style = this.renderCanvas.style
                style.position = 'fixed'
                style.top = style.left = 0
                style.zIndex = '999999999999999999999999999999999999999999'
                style.pointerEvents = 'none'
            
                style.width = this.renderCanvas.width = this.computerCanvas.width = this.globalWidth
                style.height = this.renderCanvas.height = this.computerCanvas.height = this.globalHeight
            
                document.body.append(this.renderCanvas)
            
                window.addEventListener('mousedown', this.handleMouseDown.bind(this))
                window.addEventListener('pagehide', this.handlePageHide.bind(this))
              }
            
              run() {
                this.running = true
                if (this.booms.length == 0) {
                  return this.running = false
                }
            
                requestAnimationFrame(this.run.bind(this))
            
                this.computerContext.clearRect(0, 0, this.globalWidth, this.globalHeight)
                this.renderContext.clearRect(0, 0, this.globalWidth, this.globalHeight)
            
                this.booms.forEach((boom, index) => {
                  if (boom.stop) {
                    return this.booms.splice(index, 1)
                  }
                  boom.move()
                  boom.draw()
                })
                this.renderContext.drawImage(this.computerCanvas, 0, 0, this.globalWidth, this.globalHeight)
              }
            }
            
            const cursorSpecialEffects = new CursorSpecialEffects()
            cursorSpecialEffects.init()
            

3. 爆炸特效

            "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=.1,a.alpha=.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:.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)}

4. 爱心特效

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