0%

细数我建HEXO站时踩过的坑,绝对干货!

一、网站搭建

二、解决图片显示问题

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

    1
    cnpm install https://github.com/CodeFalling/hexo-asset-image --save
  • 打开_config.yml文件,修改下述内容

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

img

三、自动配置SSL证书

四、鼠标点击特效

img

  • 首先在themes/next/source/js/src里面建一个叫fireworks.js的文件,代码如下:

    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)}"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,在上面写下如下代码:

    1
    2
    3
    4
    5
    {% 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 %}
  • 打开主题配置文件,在里面最后写下:

    1
    2
    # Fireworks
    fireworks: true

五、添加网页宠物

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

    1
    2
    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的才生效)

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    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

六、设置阅读全文

  • 在文章中使用`` 手动进行截断(比如这篇,其他方法都不行!)

七、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权限

    1
    chmod 755 /home/kms/vlmcsd
  • 添加vlmcsd服务,新建vlmcsd.pid文件执行命令。注意:这个是空白文件!!

    1
    vi /var/run/vlmcsd.pid
  • 新建vlmcsd.service文件执行命令

    1
    vi /lib/systemd/system/vlmcsd.service
  • 在新建vlmcsd.service的文件中,输入以下内容

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    [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源

    1
    2
    yum install epel-release
    rpm -Uvh http://rpms.famillecollet.com/enterprise/remi-release-7.rpm
  • 在centos安装PHP7

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    ## 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检查安装是否成功

    1
    2
    3
    4
    5
    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其他模块

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    ### 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模块

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

九、添加网易云背景音乐

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

十、待定