hexo+matery博客搭建之主题美化

脑图可拖动和放缩

定制化美化

代码高亮

本人安装hexo 7.2.0，从 Hexo5.0 版本开始自带了 prismjs 代码语法高亮的支持

如果你的博客中曾经安装过 hexo-prism-plugin 的插件，那么你须要执行 npm uninstall hexo-prism-plugin 来卸载掉它，否则生成的代码中会有 { 和 } 的转义字符。

然后，修改 Hexo 根目录下 _config.yml 文件中 highlight.enable 的值为 false，并将 prismjs.enable 的值设置为 true，主要配置如下，修改 Hexo 根目录下 _config.yml 文件中 highlight.enable 的值为 false，并新增 prism 插件相关的配置，主要配置如下：

syntax_highlighter: prismjs
highlight:
  enable: false
  line_number: true
  auto_detect: false
  tab_replace: ''
  wrap: true
  hljs: false
prismjs:
  enable: true
  preprocess: true
  line_number: true
  tab_replace: ''

注意：需要将syntax_highlighter值置为prismjs

行号显示

默认版本不显示行号，在主题source/css/matery.css添加

.line-numbers-rows {
    border-right-width: 0px !important;
}

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

在主题下的source/libs/prism/prism.css添加

pre[class*="language-"].line-numbers {
 position: relative;
 padding-left: 3.8em;
 counter-reset: linenumber;
}
pre[class*="language-"].line-numbers > code {
 position: relative;
 white-space: inherit;
}

.line-numbers .line-numbers-rows {
 position: absolute;
 pointer-events: none;
 top: 0;
 font-size: 100%;
 left: -3.8em;
 width: 3em; /* works for line-numbers below 1000 lines */
 letter-spacing: -1px;
 border-right: 1px solid #999;

 -webkit-user-select: none;
 -moz-user-select: none;
 -ms-user-select: none;
 user-select: none;

}

 .line-numbers-rows > span {
  pointer-events: none;
  display: block;
  counter-increment: linenumber;
 }

  .line-numbers-rows > span:before {
   content: counter(linenumber);
   color: #999;
   display: block;
   padding-right: 0.8em;
   text-align: right;
  }

可以添加行号，但是竖线还是没显示，以后找机会学习下其他大佬的操作

搜索

本主题中还使用到了 hexo-generator-search 的 Hexo 插件来做内容搜索，安装命令如下：

npm install hexo-generator-search --save

在 Hexo 根目录下的 _config.yml 文件中，新增以下的配置项：

search:
  path: search.xml
  field: post

中文链接转拼音（建议安装）

如果你的文章名称是中文的，那么 Hexo 默认生成的永久链接也会有中文，这样不利于 SEO，且 gitment 评论对中文链接也不支持。我们可以用 hexo-permalink-pinyin Hexo 插件使在生成文章时生成中文拼音的永久链接。

安装命令如下：

npm i hexo-permalink-pinyin --save

在 Hexo 根目录下的 _config.yml 文件中，新增以下的配置项：

permalink_pinyin:
  enable: true
  separator: '-' # default: '-'

文章字数统计插件（建议安装）

如果你想要在文章中显示文章字数、阅读时长信息，可以安装 hexo-wordcount插件。

安装命令如下：

npm i --save hexo-wordcount

然后只需在本主题下的 _config.yml 文件中，将各个文章字数相关的配置激活即可：

postInfo:
  date: true # 发布日期
  update: false # 更新日期
  wordCount: true # 文章字数统计
  totalCount: true # 站点总文章字数
  min2read: true # 文章阅读时长
  readCount: false # 文章阅读次数

添加emoji表情支持（可选的）

本主题新增了对emoji表情的支持，使用到了 hexo-filter-github-emojis 的 Hexo 插件来支持 emoji表情的生成，把对应的markdown emoji语法（::,例如：:smile: 😄）转变成会跳跃的emoji表情，安装命令如下：

npm install hexo-filter-github-emojis --save

在 Hexo 根目录下的 _config.yml 文件中，新增以下的配置项：

githubEmojis:
  enable: true
  className: github-emoji
  inject: true
  styles:
  customEmojis:

执行 hexo clean && hexo g 重新生成博客文件，然后就可以在文章中对应位置看到你用emoji语法写的表情了

看板娘

参考

暗黑模式

参考夜法大佬添加了深浅主题交换

修改themes>hexo-theme-matery>source>css>matery.css参数，调整位置

.sum-moon-box {
    width: 48px;
    height: 48px;
    text-align: center;
    border-radius: 10%;
    position: fixed;
    right: 15px;
    bottom: 135px;     /*调整位置*/
    margin-bottom: 0;
    z-index: 900;
}

暂时可用，个人喜欢放在菜单导航栏，但是目前能力有限😭

原模板初始为浅色主题，但图标为太阳fa-sun，需要修改图标为月亮fa-moon

<div class="sum-moon-box">
  <a class="btn-floating btn-large waves-effect waves-light" onclick="switchNightMode()" title="深浅主题切换" >
    <i id="sum-moon-icon" class="fas fa-moon" style="width:48px; height:48px; font-size: 28px;"></i>
  </a>
</div>

收缩目录按钮

目录收缩按钮，在/themes/hexo-theme-matery/layout/_partial/post-detail-toc.ejs中

/* toc按钮位置调整 */
#floating-toc-btn {
    position: fixed;
    right: 15px;
    bottom: 135px;     /*原来为75*/
    padding-top: 15px;
    margin-bottom: 0;
    z-index: 998;
}

返回顶部按钮

位置调整在themes>hexo-theme-matery>source>css>matery.css中

/*回到顶部按钮样式*/
.top-scroll {
    display: none;
    position: fixed;
    right: 15px;
    bottom: 135px;  /*原来为15*/
    padding-top: 15px;
    margin-bottom: 0;
    z-index: 998;
}

增加”返回顶部”文字提示，在themes\hexo-theme-matery\layout\_partial\back-top.ejs

<div id="backTop" class="top-scroll">
    <a class="btn-floating btn-large waves-effect waves-light" href="#!" title="返回顶部">
        <i class="fas fa-arrow-up"></i>
    </a>
</div>

导航栏添加深浅主题切换按钮

将themes/hexo-theme-matery/layout/_partial/day-night.ejs中原主题切换按钮注释掉

<!-- <div class="sum-moon-box">
  <a class="btn-floating btn-large waves-effect waves-light" onclick="switchNightMode()" title="深浅主题切换" >
    <i id="sum-moon-icon" class="fas fa-moon" style="width:48px; height:48px; font-size: 28px;"></i>
  </a>
</div> -->

在导航栏文件themes/hexo-theme-matery/layout/_partial/navigation.ejs中的搜索后面添加主题切换按钮，同时去掉原样式btn-floating和btn-large，调整大小

<li>
  <a href="#searchModal" class="modal-trigger waves-effect waves-light">
    <i id="searchIcon" class="fas fa-search" title="<%= __('search') %>" style="zoom: 0.85;"></i>
  </a>
</li>
<li>
  <a class="modal-trigger waves-effect waves-light" onclick="switchNightMode()" title="深浅主题切换" >
    <i id="sum-moon-icon" class="fas fa-moon" style="zoom: 0.7;"></i>
  </a>
</li>

2024.7.4：新发现个bug，深色主题+☀图标情况下，刷新页面可以实现深色主题保持，但是图标会切回初始的🌙

技术有限，不会图标保持操作，偷个懒，选择把图标固定为fa fa-adjust，同时将id改个名字

<i id="sum-moon-icon1" class="fa fa-adjust" style="zoom: 0.7;"></i>

20247.6：学习LQX博客发现，将黑夜模式判断放在themes\hexo-theme-matery\source\js\matery.js文件可以避免页面刷新时图标回到🌙

// 黑夜模式判断
if (localStorage.getItem('isDark') === '1') {
    document.body.classList.add('DarkMode');
    $('#sum-moon-icon').addClass("fa-sun").removeClass('fa-moon')
} else {
    document.body.classList.remove('DarkMode');
    $('#sum-moon-icon').removeleClass("fa-sun").addClass('fa-moon')
}

原themes\hexo-theme-matery\layout\layout.ejs中模式判断可以注释掉

鼠标光标星星拖尾

在themes/hexo-theme-matery/source/js文件夹下新建cursor.js文件，并将传送门内容粘贴进去

在themes/hexo-theme-matery/layout/layout.ejs内新增

<script src="/js/cursor.js"></script>

樱花特效

Todo

鼠标点击特效

Todo

修改页脚

修改的地方themes/hexo-theme-matery/layout/_partial/footer.ejs文件中，包括站点、使用的主题、访问量等

修改网站背景

修改主题配置文件对应参数，themes/hexo-theme-matery/_config.yml

# 网站背景图
background:
  enable: false
  url: /medias/background.jpg

时光列表

Todo

脑图

安装脑图插件

npm install hexo-markmap

绘图，可缩放，平移

{% markmap 400px %}
- 下载node.js和git
- hexo博客美化
  - 美化：代码高亮，行号显示，搜索，字数统计，emoji，
  - todo：看板娘，暗黑模式，樱花特效，右键定制，时光列表，个人相册
  - 配置修改：个人简介，运行时间，主题颜色，文章加密，个人相册等
{% endmarkmap %}

存在问题：latex公式显示异常，深色主题脑图文字不适配

模板配置修改

修改根目录下_config.yaml配置

个人信息

title: HeBlog
subtitle: '苟日新，日日新，又日新'
description: '记录学习之旅，巩固自我及启发后人'
keywords: [hexo, 算法，计算机视觉，人工智能]
author: Achhhe
language: zh-CN
timezone: ''

主题配置修改

关闭contact和friends

初始模板带有Contact和Friends选项，但是没有对应页面。如果不想创建，可以直接修改/themes/hexo-theme-matery/_config.yaml对应配置进行关闭

menu:
  Index:
    url: /
    icon: fas fa-home
  Tags:
    url: /tags
    icon: fas fa-tags
  Categories:
    url: /categories
    icon: fas fa-bookmark
  Archives:
    url: /archives
    icon: fas fa-archive
  About:
    url: /about
    icon: fas fa-user-circle
  #Contact:
   #url: /contact
   #icon: fas fa-comments
  #Friends:
   #url: /friends
   #icon: fas fa-address-book

修改个人简介

profile:
  avatar: /medias/avatar.jpg
  career: Algorithm Engineer
  
mySkills:
  enable: true
  data:
    Python:
      background: 'linear-gradient(to right, #FF0066 0%, #FF00CC 100%)'
      percent: 90%
    Low Level Vision:
      background: 'linear-gradient(to right, #9900FF 0%, #CC66FF 100%)'
      percent: 90%
    C/C++:
      background: 'linear-gradient(to right, #2196F3 0%, #42A5F5 100%)'
      percent: 60%
    Self-Supervised Learning:
      background: 'linear-gradient(to right, #00BCD4 0%, #80DEEA 100%)'
      percent: 90%
    Pytorch:
      background: 'linear-gradient(to right, #4CAF50 0%, #81C784 100%)'
      percent: 85%
    Liveness Detection:
      background: 'linear-gradient(to right, #FFEB3B 0%, #FFF176 100%)'
      percent: 85%
      
githubLink:
  enable: true
  url: https://github.com/Achhhe
  title: Fork Me

站点初始运行时间

# 站点运行开始时间.
time:
  enable: true
  year: 2024 # 年份
  month: 06 # 月份
  date: 29 # 日期
  hour: 00 # 小时
  minute: 00 # 分钟
  second: 00 # 秒

其他打开或关闭

mathjax:  # 数学公式，全局开关
  enable: true
  
music:   # 音乐插件
  enable: false
  id: 2097531989  # 对应歌单id
  
reward:  # 打赏功能
  enable: false

myProjects:  # 个人工程
  enable: false

myGallery:   # 个人相册
  enable: false
  
ribbon_dynamic:
  enable: true

sharejs:  #分享模块
  enable: true
  sites: qq,qzone,wechat,weibo,google

verifyPassword:  # 文章验证密码 SHA256加密
  enable: true

其他配置可根据个人喜好进行修改，包括：

• 菜单
• 我的梦想
• 首页的音乐播放器和视频播放器配置
• 是否显示推荐文章名称和按钮配置
• favicon 和 Logo
• 个人信息
• 文章加密
• TOC 目录
• 文章打赏信息
• 复制文章内容时追加版权信息
• MathJax
• 文章字数统计、阅读时长
• 点击页面的’爱心’效果
• 我的项目
• 我的技能
• 我的相册
• Gitalk、Gitment、Valine 和 disqus 评论配置
• 不蒜子统计和谷歌分析（Google Analytics）
• 默认特色图的集合。当文章没有设置特色图时，本主题会根据文章标题的 hashcode 值取余，来选择展示对应的特色图

如果不满意本主题中的诸多功能和主题色彩，可以在主题中自定义修改，很多更自由的功能和细节点的修改难以在主题的 _config.yml 中完成，需要修改源代码才来完成

以下列出修改颜色和图片

修改主题颜色

在主题文件的 /source/css/matery.css 文件中，搜索 .bg-color 来修改背景颜色：

/* 整体背景颜色，包括导航、移动端的导航、页尾、标签页等的背景颜色. */
.bg-color {
    background-image: linear-gradient(45deg, rgba(200,0,0,0) 40%, rgba(0,0,200,0.5));;
}

@-webkit-keyframes rainbow {
   /* 动态切换背景颜色. */
}

@keyframes rainbow {
    /* 动态切换背景颜色. */
}

CSS函数linear-gradient创建一个由两种或多种颜色沿一条直线进行线性过渡的图像

本博客设置$45^{\circ}$渐变，起始为红色系，在$40$%处变为蓝色系

修改 banner 图和文章特色图

你可以直接在 /source/medias/banner 文件夹中更换你喜欢的 banner 图片，主题代码中是每天动态切换一张，只需 7 张即可。如果你会 JavaScript 代码，可以修改成你自己喜欢切换逻辑，如：随机切换等，banner 切换的代码位置在 /layout/_partial/bg-cover-content.ejs 文件的 `` 代码中：

$('.bg-cover').css('background-image', 'url(/medias/banner/' + new Date().getDay() + '.jpg)');

在 /source/medias/featureimages 文件夹中默认有 24 张特色图片，你可以再增加或者减少，并需要在 _config.yml 做同步修改。

banner图太大可能显示红色背景，传送门

图片源自LQX博客，感谢😃

参考

行号显示

暗黑主题-Ruins

夜法之书

LQX