让你的博客不在孤单🎨

前言

个人博客一定要够酷，够炫，才能显得更牛🍺，当然内容才是核心竞争力，再好的皮囊没有肉也是一堆空壳。🍳
如果你是使用hexo+githubpages主题，可以展开看看哦博客地址🍜。

2d板娘

之前经常在其他的人的博客上看到一个萌萌的小妹子在右下角🥐，抱着好奇，想要在自己的博客中也把他加入进来，接下来就说一下集成的步骤🍤。

  • 下载代码

  • 将下载之后的代码解压之后放在博客的source文件夹中

  • 修改source/live2d-widget/autoload.js中的live2d_path

    1
    2
    3
    // 将下面的live2d_path替换成本地连接
    // const live2d_path = "https://cdn.jsdelivr.net/gh/drinkwd/live2d-widget@latest/";
    const live2d_path = "/live2d-widget/";

  • 找到fluid主题的配置文件_config.fluid.yml在文件中搜索custom_js和custom_css如果没有就增加这两个变量👇

1
2
custom_js: '/live2d-widget/autoload.js'
custom_css: 'https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6/css/all.min.css'
  • 重启博客 hexo s

左侧的小公主就出现啦，还自带了右侧的工具栏自己去看看什么功能哦🍮。

文章加密

当你有一些文章不想其他人看到的时候可以使用该插件。

  • 安装hexo-blog-encrypt
    1
    npm install --save hexo-blog-encrypt
  • 在文章的开头部分增加如下内容👇
    1
    2
    3
    4
    5
    6
    7
    8
    ---
    title: Hello World
    date: 2016-03-30 21:12:21
    password: hello # 密码
    abstract: 这篇文章被人偷走了，您可能需要输入密码才能找回. # 摘要
    message: 您好, 这里需要密码，按Enter键确认。 # 提示内容
    wrong_pass_message: 抱歉, 这个密码看着不太对, 请再试试. # 输入错误提示
    ---

  • 更详细的配置看这里👈

Aplayer

看文章怎么能少了音乐的，跟随我的脚步给你的博客增加一个播放器吧🎨，hexo提供了注入器的功能在编写注入代码🛒。

  • 在博客的根目录下创建scripts文件夹，然后在里面任意命名创建一个 js 文件即可，编写注入代码😙

    1
    2
    3
    4
    5
    6
    hexo.extend.injector.register('body_end', `
      <div id="aplayer"></div>
      <link defer rel="stylesheet" href="https://cdn.staticfile.org/aplayer/1.10.1/APlayer.min.css" />
      <script src="https://cdn.staticfile.org/aplayer/1.10.1/APlayer.min.js"></script>
      <script defer src="/js/music.js"></script>
    `);

    在source/js/music.js中增加如下内容（需要新建js文件）

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    !(function() {
        var oldLoadAp = window.onload;
        window.onload = function () {
          oldLoadAp && oldLoadAp();
      
          new APlayer({
            container: document.getElementById('aplayer'),
            fixed: true,
            autoplay: false,
            loop: 'all',
            order: 'random',
            theme: '#b7daff',
            preload: 'none',
            audio: [
              {
                name: 'song1', // 音频名称
                artist: 'artist1', // 音频艺术家
                url: '/songs/song1.mp3', // 音频链接
                cover: '/img/cover.jpg' // 音频封面
              }
            ]
          });
        }
      })();

    你会发现播放器与咱们的板娘位置重叠了，我们修改一下播放器的位置🎑

  • 找到waifu.css进行如下修改将以下样式替换成下面的代码🍱。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    #waifu-toggle {
    	background-color: #fa0;
    	border-radius: 5px;
    	bottom: 66px;
    	color: #fff;
    	cursor: pointer;
    	font-size: 12px;
    	right: 0;
    	margin-right: -100px;
    	padding: 5px 2px 5px 5px;
    	position: fixed;
    	transition:margin-right 1s;
    	width: 60px;
    	writing-mode: vertical-lr;
    }

    #waifu-toggle.waifu-toggle-active {
    	margin-right: -50px;
    }

    #waifu-toggle.waifu-toggle-active:hover {
    	margin-right: -30px;
    }

    #waifu {
    	bottom: -1000px;
    	right: 60px;
    	line-height: 0;
    	margin-bottom: -10px;
    	position: fixed;
    	transform: translateY(3px);
    	transition: transform .3s ease-in-out, bottom 3s ease-in-out;
    	z-index: 1;
    }

  • 获取网易音乐外链

    有一个很难以接受的问题就是fluid目前是不支持pjax也就是说我们每次在切换文章的时候音乐会停止播放🥟。但是为了满足我的私欲，我还是加上🥠了。

加载网页速度

这个简直太让人头痛了，如果网页加载的过慢就会导致🥞，别人刚进入到你的博客，就会退出，根本没人可以忍受慢的网址，我也一样😌。

  • 找到hexo的配置文件_config.yml增加如下内容👇

这样每次在本地运行和上传的时候都会进行html,css,js压缩🤐

1
all_minifier: true
  • 问题报错

不同平台安装这个包，可能会有点问题，我在家里的机器上装的时候就顺风顺水🛴，在公司的电脑上安装的时候就遇到了上面面的问题，解决方案 执行如下命令👇

1
2
npm install jpegtran-bin
npm rebuild jpegtran-bin
  • 重启项目

运行的时候就会看到一些图片已经被压缩了。

网站seo优化(慎读，因为我自己也不太懂)

hexo和fluid的主题已经帮我们做了一些工作了🙆‍♂️，但是如果我们想要让更多的人看到我们的博客，还是需要添加站点地图🥧，搜索引擎是通过（sitemap）去抓取可供爬取的网页的🚖，虽然还是百度用的人比较多但是我发现在百度我从来就没有搜索到githubpage的相关内容，索性就不挣扎啦🍳。

  1. 下载sitemap生成工具
    1
    npm install hexo-generator-sitemap —save
  2. 配置_config.yml
    1
    2
    3
    # sitemap
    sitemap:
      path: sitemap.xml
    重新执行hexo g的时候就会在public下生成sitemap.xml

博客的sitemap是为了告诉了搜索引擎可以爬取的内容，但是搜索引擎怎么知道你就是这个网站的主人呢？

  • 谷歌验证工具
    在下方的表格中输入你的网站例如我的https://drinkwd.github.io/

    点击继续之后会让你选择验证方式，由于我已经验证通过了忘记截图了只能说一下流程。

  • 使用html的验证方式，下载html文件

  • 将下载的html文件放在博客的public文件夹中（如果没有public文件夹需要使用hexo g生成一下）

  • 运行hexo d（目的就是告诉谷歌我已经把你给我的地址上传到我的博客了，我就是这个网站的主人）
  • 点击验证进行验证，不出意外一会出现一下以下界面

此时还需要上传站点地图sitemap到搜索引擎，下次让搜索引擎的爬虫来的光顾的时候就可以通过这个站点地图来爬取了相应的链接

  • 再次访问谷歌验证工具就会是如下界面，将生成的sitemap.xml的文件路径放在这里就可以，因为我是在public下生成sitemap.xml，所以我就填写sitemap.xml就可以注意不需要填写public

    提交成功之后过一段时间（一段时间可能会很长很长，我现在还在等）就可以发现博客被谷歌收录了。

部署Gitee

无论怎么优化如果不fq还是很难访问到博客的😍，之前是在github中部署的速度感人，于是我打算在gitee上也部署一套博客😗，之前看大家都部署在coding中但是最近发现coding好像收费了，白嫖党的生活过的有滋有味🤗。

  • 在gitee中创建仓库，路径和用户名保一致

  • 创建成功获取仓库链接

  • 修改hexo配置文件（注意缩进，如果缩进不正确会提交失败）
    1
    2
    3
    4
    5
    6
    7
    deploy:
    - type: git
      repo: xxxx # github地址
      branch: main
    - type: git
      repo: xxxx # gitee地址
      branch: master
  • 开启gitee page服务（如果没有实名认证需要进行实名认证）

  • 如果没有实名认证的话需要进行一下实名认证

  • 认证结束之后就可以看到gitee对应的博客地址了

网站CDN加速

当我把博客部署到gitee之后发现国内的访问还是比较慢😣，我很难过的打开了控制台我发现了端倪有很多资源在国内访问都是超时的😮，于是我开始修改cdn资源😛。主要参考了这篇文章提供的思路。下面是我修改的资源👇

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
static_prefix:
  # 内部静态
  # Internal static
  internal_js: /js
  internal_css: /css
  internal_img: /img

  # 图标库，包含了大量社交类图标，主题依赖的不包含在内，因此可自行修改，详见 https://hexo.fluid-dev.com/docs/icon/
  # Icon library, which includes many social icons, does not include those theme dependent, so your can modify link by yourself. See: https://hexo.fluid-dev.com/docs/en/icon/
  iconfont: //at.alicdn.com/t/font_1736178_kmeydafke9r.css
  # https://cdn.jsdelivr.net/npm/anchor-js@4.3.0/ 原有cdn
  anchor: https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/anchor-js/4.3.0/

  # https://cdn.jsdelivr.net/npm/github-markdown-css@4.0.0/ 原有cdn

  github_markdown: https://cdn.staticfile.org/github-markdown-css/4.0.0/

  # https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/ 原有cdn 外网快，内网加载不通
  jquery: http://cdn.staticfile.org/jquery/3.5.1/

  # https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/ 原有cdn 外网快，内网加载不通

  bootstrap: https://cdn.staticfile.org/bootstrap/4.5.3/

  # https://cdn.jsdelivr.net/npm/highlight.js@10.4.0/

  highlightjs: https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/highlight.js/10.4.0/

  # https://cdn.jsdelivr.net/npm/prismjs@1.22.0/ 

  prismjs: https://cdn.staticfile.org/prism/1.22.0/

  # https://cdn.staticfile.org/tocbot/4.12.0/tocbot.min.css
  tocbot: https://cdn.staticfile.org/tocbot/4.12.0/

  # https://cdn.jsdelivr.net/npm/typed.js@2.0.11/lib/
  typed: https://cdn.staticfile.org/typed.js/2.0.12/

  # https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@3.5.7/dist/ 
  fancybox: https://cdn.staticfile.org/fancybox/3.5.7/

  # https://cdn.jsdelivr.net/npm/nprogress@0.2.0/
  nprogress: https://cdn.staticfile.org/nprogress/0.2.0/

  #  https://cdn.jsdelivr.net/npm/mathjax@3.1.2/es5/ 
  mathjax: https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/mathjax/3.1.2/es5/

  # https://cdn.jsdelivr.net/npm/katex@0.12.0/dist/ 
  katex: https://cdn.staticfile.org/KaTeX/0.12.0/

  busuanzi: https://busuanzi.ibruce.info/busuanzi/2.3/

  # https://cdn.jsdelivr.net/npm/clipboard@2.0.6/dist/ 
  clipboard: https://cdn.staticfile.org/clipboard.js/2.0.6/

  # https://cdn.jsdelivr.net/npm/mermaid@8.8.3/dist/ 
  mermaid: https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/mermaid/8.8.3/

  # https://cdn.jsdelivr.net/npm/valine@1.4.14/dist/
  valine: https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/valine/1.4.14/

  waline: https://cdn.jsdelivr.net/npm/@waline/client@0.4.2/dist/

  gitalk: https://cdn.jsdelivr.net/npm/gitalk@1.7.0/dist/

  disqusjs: https://cdn.jsdelivr.net/npm/disqusjs@1.0/dist/

  twikoo: https://cdn.jsdelivr.net/npm/twikoo@0.1.15/dist/

总结

提高githubpage个人博客的美观程度比较容易，但是提升流量确实是很难很难🥐，就拿我现在的博客来说可以说是无人问津了🍜，如果不fq还有可能会访问失败，因为自己对seo的优化也不是很了解🤦‍♂️，如果有大佬可以提高这种个人博客的访问速度👼，以及流量欢迎来找我指点江山呀！🙆‍♂️

参考链接

hexo-all-minifier

板娘

hexo seo 优化

阅读
代码人生

本博客所有文章除特别声明外，均采用 CC BY-SA 4.0 协议 ，转载请注明出处！谢谢