细数我建HEXO站时踩过的坑

细数我建HEXO站时踩过的坑

一、网站搭建

• 基本参考https://blog.csdn.net/qq_35561857/article/details/81590953和腾讯云使用宝塔面板部署Hexo

• 建立SSH信任时，如果ssh-copy-id不存在时，使用

  cat ~/.ssh/id_*.pub | ssh  root@服务器IP 'cat >> .ssh/authorized_keys'
  

二、解决图片显示问题

• 需要安装一个图片路径转换的插件，这个插件名字是hexo-asset-image

  cnpm install https://github.com/CodeFalling/hexo-asset-image --save
  

• 打开_config.yml文件，修改下述内容

  post_asset_folder: true
  

• 修改博客目录下node_modules\hexo-asset-image\index.js(原文件有bug)
  

三、自动配置SSL证书

• 中文参考https://www.cnblogs.com/Crazy-Liu/p/11039859.html
• 自动配置SSLhttps://certbot.eff.org/lets-encrypt/centosrhel7-nginx

四、鼠标点击特效

• 首先在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,在上面写下如下代码：

  {% 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
  

五、添加网页宠物

• 在博客目录下安装模块:

  cnpm install --save hexo-helper-live2d
  cnpm install --save live2d-widget-model-wanko //更多选择在https://github.com/xiazeyu/live2d-widget-models
  

• 向Hexo的 _config.yml 文件或主题的 _config.yml 文件中添加配置(我放在hexo的才生效)

  live2d:
    enable: true
    scriptFrom: local
    pluginRootPath: live2dw/
    pluginJsPath: lib/
    pluginModelPath: assets/
    tagMode: false
    debug: false
    model:
      use: live2d-widget-model-wanko
    display:
      position: right
      width: 150
      height: 300
    mobile:
      show: true
    react:
      opacity: 0.7
  

六、设置阅读全文

• 在文章中使用<!--more-->手动进行截断(比如这篇，其他方法都不行！)

七、KMS服务器配置

• vlmcsd从github下载https://github.com/Wind4/vlmcsd/releases下载最新版

• 下载成功后，解压出来binaries\Linux\intel\static\vlmcsd-x64-musl-static，将vlmcsd-x64-musl-static文件重命名为vlmcsd放在/home/kms目录下并且设置0775权限

  chmod 755 /home/kms/vlmcsd
  

• 添加vlmcsd服务，新建vlmcsd.pid文件执行命令。注意：这个是空白文件！！

  vi /var/run/vlmcsd.pid
  

• 新建vlmcsd.service文件执行命令

  vi /lib/systemd/system/vlmcsd.service
  

• 在新建vlmcsd.service的文件中，输入以下内容

  [Unit]
  Description=KMS Server By vlmcsd
  After=network.target
  [Service]
  Type=forking
  PIDFile=/var/run/vlmcsd.pid
  ExecStart=/home/kms/vlmcsd -p /var/run/vlmcsd.pid
  ExecStop=/bin/kill -HUP $MAINPID
  PrivateTmp=true
  [Install]
  WantedBy=multi-user.target
  

• 重载服务：systemctl daemon-reload

• 启动VLMCSD：systemctl start vlmcsd

• 查看VLMCSD的运行状态：systemctl status vlmcsd

• 设置开机启动：systemctl enable vlmcsd

八、PHP7.x的安装

• 原文(英文)

• 安装yum源

  yum install epel-release
  rpm -Uvh http://rpms.famillecollet.com/enterprise/remi-release-7.rpm
  

• 在centos安装PHP7

  ## Install PHP 7.4 
  yum --enablerepo=remi-php74 install php
  
  ## Install PHP 7.3 
  yum --enablerepo=remi-php73 install php
  
  ## Install PHP 7.2 
  yum --enablerepo=remi-php72 install php
  
  ## Install PHP 7.1 
  yum --enablerepo=remi-php71 install php
  

• 使用php -v检查安装是否成功

  php -v
  
  PHP 7.4.1 (cli) (built: Dec 17 2019 16:35:58) ( NTS )
  Copyright (c) The PHP Group
  Zend Engine v3.4.0, Copyright (c) Zend Technologies
  

• 安装PHP其他模块

  ### For PHP 7.4
  yum --enablerepo=remi-php74 install php-xml php-soap php-xmlrpc php-mbstring php-json php-gd php-mcrypt
  
  ### For PHP 7.3
  yum --enablerepo=remi-php73 install php-xml php-soap php-xmlrpc php-mbstring php-json php-gd php-mcrypt
  
  ### For PHP 7.2
  yum --enablerepo=remi-php72 install php-xml php-soap php-xmlrpc php-mbstring php-json php-gd php-mcrypt
  
  ### For PHP 7.1
  yum --enablerepo=remi-php71 install php-xml php-soap php-xmlrpc php-mbstring php-json php-gd php-mcrypt
  

• 搜索其他PHP模块

  yum --enablerepo=remi-php74 search php | grep php74  //其他版本以此类推
  

九、添加网易云背景音乐

• 在根目录下的/theme/next/layout/_macro/sidebar.swig文件（侧边栏布局文件）中选择你要添加播放器的位置，然后粘贴外链接
  

十、待定