魔改hexo博客
hexo linux
教程
发布日期:   2020-09-18
更新日期:   2020-12-07
文章字数:   2k
阅读时长:   8 分
阅读次数:  

魔改hexo博客

本次魔改主要包括以下几个方面

1. 添加一言插件

2. 添加动态线条背景

3. 添加Dplayer视频播放器

4. 添加Aplayer播放器

5. 添加看板娘（live2d-widget插件）

6. 添加黑夜模式

7. 添加文章更新日期

8. 添加访客地图统计

9. 添加valine评论邮件提醒

10. 添加网站背景

11. 添加腾讯兔小巢

12. Mac样式的代码块的添加

12.1 代码高亮

12.1.1 禁用highlight

打开根目录下的_config.yml文件,修改配置

highlight:
enable: false
line_number: false
auto_detect: false
tab_replace:

12.1.2 获取prism配置文件

在https://prismjs.com/download.html选择喜欢的theme, 需要的language和plug(不推荐选太多,需要的选上即可), 将文件下载到本地后分别重命名为prism.css, prism.js, 将其放入到/theme/matery/source/js/prism目录下(prism文件夹自己创建)

12.1.3 配置prism

  • 在themes/matery/layout/_partial/head.ejs 添加以下代码:
<link rel="stylesheet" href="/js/prism/prism.css">
  • 在themes/matery/layout/_partial/footer.ejs 添加以下代码:
<script src="/js/prism/prism.js" async></script>

12.1.4 添加配置

在根目录的 _config.yml 文件中添加以下代码:

prism_plugin:
    mode: 'preprocess'    # realtime/preprocess
    theme: 'tomorrow'
    line_number: false   # default false
    custom_css:

marked:
    langPrefix: line-numbers language-

此时测试效果如下图所示:

12.2 添加mac样式

12.2.1 创建codeblock的js文件

在目录theme/source/libs/codeBlock/下创建codeBlock.js文件, 在里面添加如下代码:

// 代码块

$(function () {
    $('pre').wrap('<div class="code-area" style="position: relative"></div>');
});

12.2.2 添加css样式

在theme/source/css/matery.css文件中添加:

pre {
    padding: 2.5rem 1.5rem 1.5rem 1.5rem !important;
    margin: 1rem 0 !important;
    background: #272822;
    overflow: auto;
    border-radius: 0.35rem;
    tab-size: 4;
}

.code-area::after {
    content: " ";
    position: absolute;
    border-radius: 50%;
    background: #ff5f56;
    width: 12px;
    height: 12px;
    top: 0;
    left: 12px;
    margin-top: 12px;
    -webkit-box-shadow: 20px 0 #ffbd2e, 40px 0 #27c93f;
    box-shadow: 20px 0 #ffbd2e, 40px 0 #27c93f;
}

code {
    padding: 1px 5px;
    top: 13px !important;
    font-family: Inconsolata, Monaco, Consolas, "Courier New", Courier, monospace;
    font-size: 0.91rem;
    color: #e96900;
    background-color: #f8f8f8;
    border-radius: 2px;
}

pre code {
    padding: 0;
    color: #e8eaf6;
    background-color: #272822;
}

pre[class*="language-"] {
    padding: 1.2em;
    margin: 0.5em 0;
}

code[class*="language-"],
pre[class*="language-"] {
    color: #e8eaf6;
    white-space: pre-wrap !important;
}

12.2.3 调用js文件

在theme/layout/_partial/post-detail.ejs文件中添加

<!-- 代码块 -->
<script type="text/javascript" src="/libs/codeBlock/codeBlockFuction.js"></script>

12.3 测试

执行hexo clean && hexo g && hexo s, 效果如下:

13. 访问速度优化

13.1 静态资源优化

13.1.1 图片压缩

WebP 是Google开发的新图像格式,旨在以可接受的视觉质量为无损和有损压缩提供较小的文件大小。有损模式下比 JPEG 小 25% - 34%，无损模式下较 PNG 小 26%,很显然,在相同的用户体验下,使用WebP格式可以提高网站的访问速度.
如果你想详细了解这其中的技术细节，可以阅读 Google 开发者文章WebP压缩技术

13.1.1.1 优化目标

使用WebP固然可以优化图像资源,提高访问速度,但截止到目前为止,即便浏览器对WebP的支持情况 已经接近80%, 却依然有些主流浏览器如 Safari、IE 仍不支持，所以不能直接转用 WebP.
由于目前精力有限,故先设定一个优化目标如下:

  • 由于压缩图像这项工作重复且繁琐，图像优化应自动化完成,初次配置完成，日后使用无需任何操作便可全自动切换 WebP 图片格式.
  • 对于不支持的浏览器，会自动回退到 JPEG/PNG 等传统格式
  • 提前生成好两份文件而非请求时计算，节省算力且响应更迅速
13.1.1.2 目前已完成(网站首页轮播图)

这里使用一个开源工具: Webp Converter and Analytics, 具体使用方法在项目介绍页,这里不再赘述.
只是暂时使用这个工具,因为我的博客目前图片资源大的就是首页轮播图,这只是一个暂时的解决方案,因为需要手动(懒)…

13.1.2 HTML压缩

待定

13.1.3 CSS压缩

待定

13.2 静态资源加载优化

13.2.1 使用CDN

参考CDN for Blog

推荐文章的插件有很多, hexo-related-popular-posts 是一个很棒的插件, 安装也很简单,不过我这里使用的是hexo-recommended-posts

14.1 安装

npm install hexo-recommended-posts --save

14.2 下载推荐文章列表

hexo recommend

14.3 自定义配置

在博客根目录添加以下默认配置,根据个人情况修改

recommended_posts:
  server: https://api.truelaurel.com #后端推荐服务器地址
  timeoutInMillis: 10000 #服务时长，超过此时长，则使用离线推荐模式
  internalLinks: 3 #内部文章数量
  externalLinks: 1 #外部文章数量
  fixedNumber: false #控制是否返回固定数量的推荐文章, 如果默认推荐文章不够的话会填充当前文章的前后文章作为推荐文章.
  autoDisplay: true #自动在文章底部显示推荐文章
  excludePattern: [] #添加想要被过滤的链接的正则表达式, 如配置为 ["example.com"], 则所有包含 example.com 的链接都会从推荐文章中过滤掉.
  titleHtml: <h1>推荐文章<span style="font-size:0.45em; color:gray">（由<a href="https://github.com/huiwang/hexo-recommended-posts">hexo文章推荐插件</a>驱动）</span></h1> #自定义标题

14.4 一点小改动

插件虽然有autoDisplay选项来控制是否在文章底部显示文章,但在配置文件中竟然没有一个选项来控制是否启用插件,这不能忍,于是我修改了一点插件的代码,实现了这个功能,具体实现如下:

  • 编辑hexo-recommended-posts/lib/recommend.js文件,第二行修改为

    var posts = filterPosts(recommended_posts, post, config.excludePattern, config.enable)

    第九行修改为

    function filterPosts(recommended_posts, post, excludePattern, enable) {
  if (recommended_posts === undefined || !enable ||
      recommended_posts[post.permalink] === undefined) {
      return [];
  }

  • 在根目录config中添加enable选项,具体如下:

    recommended_posts:
  enable: true
server: https://api.truelaurel.com #后端推荐服务器地址
timeoutInMillis: 10000 #服务时长，超过此时长，则使用离线推荐模式
internalLinks: 3 #内部文章数量
externalLinks: 1 #外部文章数量
fixedNumber: false #控制是否返回固定数量的推荐文章, 如果默认推荐文章不够的话会填充当前文章的前后文章作为推荐文章.
autoDisplay: true #自动在文章底部显示推荐文章
excludePattern: [] #添加想要被过滤的链接的正则表达式, 如配置为 ["example.com"], 则所有包含 example.com 的链接都会从推荐文章中过滤掉.
titleHtml: <h1>推荐文章<span style="font-size:0.45em; color:gray">（由<a href="https://github.com/huiwang/hexo-recommended-posts">hexo文章推荐插件</a>驱动）</span></h1> #自定义标题

更新日志

2020.12.07

  • 添加hexo-recommended-posts插件

2020.12.06

  • 优化图片资源(首页轮播图)

2020.12.05

  • 修复了一个 ClustrMaps 未统计访客的bug
  • 默认不开启看板娘(太占用cpu内存,影响用户体验)

2020.11.22

2020.11.16

  • 添加网站背景图, 添加腾讯兔小巢
  • 添加Mac样式的代码块

2020.11.15

  • 删除冗余脚本, 模块化插件
  • 使用valine-admin实现评论邮件提醒
  • 修复黑夜模式bug, 现已完美运行

2020.11.14

  • 加入文章更新日期
  • 添加ClustrMaps访客地图统计(从即日起)
    • 可通过config文件切换地图的样式
    • 目前在pc端访问globe样式无法加载, 移动端则正常(bug)

2020.09.25

  • 加入黑夜模式
  • 试运行黑夜模式
赏

   转载规则


《魔改hexo博客》 由 GeekOcean 采用 知识共享署名 4.0 国际许可协议 进行许可。
  目录