用 Hexo 改造属于你的个性化博客（完结篇）

2023-10-21 22:14:59

继上一篇文章，我们已经了解了如何使用 Hexo 搭建一个属于自己的博客。然而，一个好的博客不仅仅是一个可以发布文章的平台，更是一个彰显个人风格和提供个性化体验的地方。因此，本文将继续讲解如何对 Hexo 博客进行全面改造，添加更多实用功能，提升博客的颜值和用户体验。

评论系统

评论系统是博客与读者互动的重要途径。在 Hexo 中，我们可以通过安装第三方插件来添加评论功能。推荐使用以下插件：

安装插件后，按照插件文档中的说明配置相关参数，即可在文章页面启用评论功能。

百度统计

百度统计可以帮助我们了解博客的流量和用户行为。在 Hexo 中，我们可以使用百度统计插件来集成百度统计。

安装插件并配置相关参数后，即可在博客后台查看百度统计数据，了解博客的访问量、来源、用户行为等信息。

雪花飘落特效

雪花飘落特效可以营造出浪漫和冬日氛围。在 Hexo 中，我们可以使用 snowfall.js 来添加雪花飘落效果。

在博客主题的配置文件中添加以下代码：

hexo.extend.helper.register('snowfall', function () {
  if (!inBrowser) return;
  const canvas = document.createElement('canvas');
  const ctx = canvas.getContext('2d');
  const width = canvas.width = window.innerWidth;
  const height = canvas.height = window.innerHeight;
  canvas.style.pointerEvents = 'none';
  canvas.style.position = 'fixed';
  canvas.style.top = 0;
  canvas.style.left = 0;
  canvas.style.zIndex = 999999;
  document.body.appendChild(canvas);
  const particles = [];
  for (let i = 0; i < 100; i++) {
    particles.push({
      x: Math.random() * width,
      y: Math.random() * height,
      vx: Math.random() * 2 - 1,
      vy: Math.random() * 2 - 1
    });
  }
  function loop() {
    ctx.clearRect(0, 0, width, height);
    for (let i = 0; i < particles.length; i++) {
      const p = particles[i];
      p.x += p.vx;
      p.y += p.vy;
      if (p.x < 0 || p.x > width) {
        p.vx *= -1;
      }
      if (p.y < 0 || p.y > height) {
        p.vy *= -1;
      }
      ctx.fillStyle = 'rgba(255, 255, 255, 0.5)';
      ctx.beginPath();
      ctx.arc(p.x, p.y, 2, 0, Math.PI * 2);
      ctx.fill();
    }
    requestAnimationFrame(loop);
  }
  loop();
});

Live2D 看板娘

Live2D 看板娘可以让博客更加生动可爱。在 Hexo 中，我们可以使用 live2d-widget 插件来添加 Live2D 看板娘。

安装插件并配置相关参数后，即可在博客侧边栏或文章中显示 Live2D 看板娘。

鼠标点击效果

鼠标点击效果可以提升博客的交互性。在 Hexo 中，我们可以使用 canvas-nest 插件来添加各种鼠标点击效果。

安装插件并配置相关参数后，即可在博客主题的配置文件中添加如下代码：

hexo.extend.helper.register('canvasNest', function () {
  if (!inBrowser) return;
  const canvas = document.createElement('canvas');
  const ctx = canvas.getContext('2d');
  const width = canvas.width = window.innerWidth;
  const height = canvas.height = window.innerHeight;
  canvas.style.pointerEvents = 'none';
  canvas.style.position = 'fixed';
  canvas.style.top = 0;
  canvas.style.left = 0;
  canvas.style.zIndex = 999999;
  document.body.appendChild(canvas);
  const particles = [];
  for (let i = 0; i < 100; i++) {
    particles.push({
      x: Math.random() * width,
      y: Math.random() * height,
      vx: Math.random() * 2 - 1,
      vy: Math.random() * 2 - 1
    });
  }
  function loop() {
    ctx.clearRect(0, 0, width, height);
    for (let i = 0; i < particles.length; i++) {
      const p = particles[i];
      p.x += p.vx;
      p.y += p.vy;
      if (p.x < 0 || p.x > width) {
        p.vx *= -1;
      }
      if (p.y < 0 || p.y > height) {
        p.vy *= -1;
      }
      ctx.fillStyle = 'rgba(255, 255, 255, 0.5)';
      ctx.beginPath();
      ctx.arc(p.x, p.y, 2, 0, Math.PI * 2);
      ctx.fill();
    }
    requestAnimationFrame(loop);
  }
  loop();
});