Crf's Blog
0%

Hexo主题美化

发表于 更新于 分类于
本文字数： 2.7k 阅读时长 ≈ 10 分钟

站点配置

去掉强力驱动

找到主题文件夹下layout/partials/footer.njk，将其包含的的以下代码注释掉或删除：

1
2
3
{% if theme.footer.powered %}
<div class="powered-by">{# #}{{ __('footer.powered', '<a class="theme-link" target="_blank" href="https://hexo.io">Hexo</a>') }}{# #}</div>
{% endif %}

新版的可以尝试下，在主题配置文件搜索powered
如果关键词存在，设置为如下即可

1
2
# Powered by Hexo & NexT
powered: false

创建菜单栏页面

菜单显示对应标签，在主题配置文件_configy.yml找到menu关键词去掉需要显示的标签注释,默认只显示home，如下我们就是把about标签的注释去掉了:

1
2
3
home: / || fa fa-home
about: /about/ || fa fa-user
......

创建相关标签页面，这里以about页面为例

1
hexo new page "about"

打开引擎对页面进行修改

添加访问量

1.更改主题配置 _config.yml假如有映射文件则是_config.next.yml,找到 busuanzi_count 参数 enable改为true

1
busuanzi_count: enable: true

2.找到主题文件夹下 layout/partials/footer.njk 文件，在末尾div同级位置加上如下代码：

1
2
3
4
5
6
7
8
9
10
11
12
<script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>

<div class="powered-by">
  <i class="fa fa-user-md"></i>
  <span id="busuanzi_container_site_pv">
    本站访问量:<span id="busuanzi_value_site_pv"></span>次
  </span>
  <span class="post-meta-divider">|</span>
  <span id="busuanzi_container_site_uv">
    本站总访客量：<span id="busuanzi_value_site_uv"></span>人
  </span>
</div>

网站运行时长

找到主题文件夹下 layout/partials/footer.njk 文件，在末尾div同级位置加上如下代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<div>
<span id="timeDate">载入天数...</span><span id="times">载入时分秒...</span>
<script>
    var now = new Date(); 
    function createtime() { 
        var grt= new Date("08/10/2020 00:00:00");//在此处修改你的建站时间
        now.setTime(now.getTime()+250); 
        days = (now - grt ) / 1000 / 60 / 60 / 24; dnum = Math.floor(days); 
        hours = (now - grt ) / 1000 / 60 / 60 - (24 * dnum); hnum = Math.floor(hours); 
        if(String(hnum).length ==1 ){hnum = "0" + hnum;} minutes = (now - grt ) / 1000 /60 - (24 * 60 * dnum) - (60 * hnum); 
        mnum = Math.floor(minutes); if(String(mnum).length ==1 ){mnum = "0" + mnum;} 
        seconds = (now - grt ) / 1000 - (24 * 60 * 60 * dnum) - (60 * 60 * hnum) - (60 * mnum); 
        snum = Math.round(seconds); if(String(snum).length ==1 ){snum = "0" + snum;} 
        document.getElementById("timeDate").innerHTML = "已运行 "+dnum+" 天 "; 
        document.getElementById("times").innerHTML = hnum + " 小时 " + mnum + " 分 " + snum + " 秒"; 
    } 
setInterval("createtime()",250);
</script>
</div>

增添样式

文章目录

这里我用的是next主题。打开主题映射文件_config.next.yml，找到toc:修改为如下代码：

1
2
3
4
5
6
7
8
9
10
11
12
# Table of Contents in the Sidebar
# Front-matter variable (nonsupport wrap expand_all).
toc:
  enable: true
  # Automatically add list number to toc.
  number: true
  # If true, all words will placed on next lines if header width longer then sidebar width.
  wrap: false
  # If true, all level of TOC in a post will be displayed, rather than the activated part of it.
  expand_all: false
  # Maximum heading depth of generated toc.
  max_depth: 6

附：next主题侧边栏Next中文目录单击不跳转问题解决方案
报错：

1
2
Uncaught TypeError: Cannot read properties of null (reading 'getBoundingClientRect')
at HTMLAnchorElement.<anonymous> (utils.js:302:31)

打开next主题文件夹，找到next\source\js\ utils.js,搜索registerSidebarTOC函数，更改为
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
  registerSidebarTOC: function () {
  const navItems = document.querySelectorAll('.post-toc li');
  const sections = [...navItems].map(element => {
    var link = element.querySelector('a.nav-link');
    var target = document.getElementById(decodeURI(link.getAttribute('href')).replace('#', ''));
    // TOC item animation navigate.
    link.addEventListener('click', event => {
      event.preventDefault();
      //var target = document.getElementById(event.currentTarget.getAttribute('href').replace('#', ''));
      var offset = target.getBoundingClientRect().top + window.scrollY;
      window.anime({
        targets: document.scrollingElement,
        duration: 500,
        easing: 'linear',
        scrollTop: offset + 10
      });
    });
    //return document.getElementById(link.getAttribute('href').replace('#', ''));
    return target;
  });
  this.updateActiveNav();
},

侧边栏图标修改

以添加csdn图标为例子,首先在iconfont官网搜索自己喜欢的图标，点击下载，选择svg文件(4848或6464规格就够了)
iconfont_csdn
将图片保存在根目录文件下\source\css\images路径下，注意不是next主题文件夹。如果没有根据路径文件夹请自行创建(主题不同存放路径会不同，像我用的next8.16版本\source\images会报错..\css\images文件不存在)。
然后在根目录\source\ _data路径下新建styles.styl文件添加如下代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
/* sidebar social icon */
.csdn {
  background-image: url('/images/icon.svg'); //icon.svg是下载保存下载的文件
  background-size: 1em 1em;
  opacity: 0.55;
  background-position: 0.05rem 0.2rem;
  background-repeat: no-repeat;
  height: 1rem;
  width: 1rem; 
  border-radius: 0rem;
  /*鼠标停留在图标上时，图标呈现发光效果*/
  &:hover {
      opacity: 1;
    }
}

修改主题文件夹配置 _config.yml文件 假如有映射文件则是根目录下_config.next.yml,找到 custom_file_path 把 style: source/_data/styles.styl是否已取消注释，没有的话把注释去掉

最后应用图标,打开主题文件夹配置文件,找到social:处添加

1
2
3
social:
  CSDN: https://yourcsdn.com || fa csdn 
  # GitHub: https://github.com/yourname || fab fa-github

侧边栏链接样式

修改侧边栏链接为当前窗口打开，搜索主题目录下关键词next-url.js，找到next-url.js，在该脚本下搜索_blank改为_self

修改鼠标

更换鼠标样式

修改主题文件夹配置 _config.yml文件 假如有映射文件则是根目录下_config.next.yml,找到 custom_file_path 把 style: source/_data/styles.styl前面注释去掉
在主题文件夹目录下source_data\styles.styl(没有就创建_data文件夹和styles.styl文件，要求与注释路径一致)添加如下代码即可

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
/*鼠标样式*/
* {
  cursor: url(/images/Arrow.cur),auto;
}
:active {
  // cursor: url(/images/Hand.cur),auto
}
:link {
  cursor: url(/images/Hand.cur),auto
}
// 鼠标样式补充
a, span.exturl {
	cursor: url(/images/Hand.cur),auto
}
.posts-expand .post-meta time {
	cursor: url(/images/Hand.cur),auto
}

添加鼠标移动效果

在主题文件夹目录下source\js\中新建ColorfulCursor.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
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
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
(function ColorfulCursor() {
  
    var possibleColors = ["#D61C59", "#E7D84B", "#1B8798"]
    var width = window.innerWidth;
    var height = window.innerHeight;
    var cursor = {x: width/2, y: width/2};
    var particles = [];
    
    function init() {
      bindEvents();
      loop();
    }
    
    // Bind events that are needed
    function bindEvents() {
      document.addEventListener('mousemove', onMouseMove);
      document.addEventListener('touchmove', onTouchMove);
      document.addEventListener('touchstart', onTouchMove);
      
      window.addEventListener('resize', onWindowResize);
    }
    
    function onWindowResize(e) {
      width = window.innerWidth;
      height = window.innerHeight;
    }
    
    function onTouchMove(e) {
      if( e.touches.length > 0 ) {
        for( var i = 0; i < e.touches.length; i++ ) {
          addParticle( e.touches[i].clientX, e.touches[i].clientY, possibleColors[Math.floor(Math.random()*possibleColors.length)]);
        }
      }
    }
    
    function onMouseMove(e) {    
      cursor.x = e.clientX;
      cursor.y = e.clientY;
      
      addParticle( cursor.x, cursor.y, possibleColors[Math.floor(Math.random()*possibleColors.length)]);
    }
    
    function addParticle(x, y, color) {
      var particle = new Particle();
      particle.init(x, y, color);
      particles.push(particle);
    }
    
    function updateParticles() {
      
      for( var i = 0; i < particles.length; i++ ) {
        particles[i].update();
      }
      
      for( var i = particles.length -1; i >= 0; i-- ) {
        if( particles[i].lifeSpan < 0 ) {
          particles[i].die();
          particles.splice(i, 1);
        }
      }
      
    }
    
    function loop() {
      requestAnimationFrame(loop);
      updateParticles();
    }
    
    function Particle() {
  
      this.character = "*";
      this.lifeSpan = 120; //ms
      this.initialStyles ={
        "position": "fixed",
        "top": "0", //必须加
        "display": "block",
        "pointerEvents": "none",
        "z-index": "10000000",
        "fontSize": "20px",
        "will-change": "transform"
      };
  
      this.init = function(x, y, color) {
  
        this.velocity = {
          x:  (Math.random() < 0.5 ? -1 : 1) * (Math.random() / 2),
          y: 1
        };
        
        this.position = {x: x - 10, y: y - 20};
        this.initialStyles.color = color;
        console.log(color);
  
        this.element = document.createElement('span');
        this.element.innerHTML = this.character;
        applyProperties(this.element, this.initialStyles);
        this.update();
        
        document.body.appendChild(this.element);
      };
      
      this.update = function() {
        this.position.x += this.velocity.x;
        this.position.y += this.velocity.y;
        this.lifeSpan--;
        
        this.element.style.transform = "translate3d(" + this.position.x + "px," + this.position.y + "px,0) scale(" + (this.lifeSpan / 120) + ")";
      }
      
      this.die = function() {
        this.element.parentNode.removeChild(this.element);
      }
      
    }
    
    function applyProperties( target, properties ) {
      for( var key in properties ) {
        target.style[ key ] = properties[ key ];
      }
    }
    
    init();
  })();

然后在主题文件夹目录下\layout_layout.njk文件内引入

1
<!-- 樱花特效 -->{% if theme.sakura.enable %}<script async src="/js/ColorfulCursor.js"></script>{% endif %}

修改文件夹配置 _config.yml文件 假如有映射文件则是根目录下_config.next.yml添加

1
2
# 樱花飘落动特效
sakura:enable: true

设置背景样式

动态背景样式

在主题文件夹下的 layout 文件夹找到并打开名layout文件，在末尾加上代码:

1
2
<!-- 动态背景 -->
<script type="text/javascript" src="//cdn.bootcss.com/canvas-nest.js/1.0.0/canvas-nest.min.js"></script>

动态背景设置****

在主题文件夹下的 source/css 文件夹，进入 css/custom 文件下，用文本形式打开 custom.styl 文件，然后添加下面这段代码。代码中 url 的地址是指到： 主题文件夹/source/images/ 。

添加音乐播放器

插入播放器方法

这里提供两种便捷方式,第一种方式打开网易云网页官方,(单曲)打开自己喜欢的歌曲播放界面点击生成外链或创建自己喜欢的歌单拉入非vip的歌曲，打开歌单界面点点击生成外链。选择想要的样式，如下图：
图片
打开主题文件夹下 layout/_macro/sidebar.njk文件，在div同级位置插入如下代码

1
2
<---<div>复制的代码</div>--->
<div><iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=110 src="//music.163.com/outchain/player?type=0&id=8425659719&auto=1&height=90"></iframe></div>

第二种方式，在复制出来的链接中找到id(像上面:id=8425659719 8425659719就是我的歌单id),执行与第一种方式同样的插入方式
打开主题文件夹下 layout/_macro/sidebar.njk文件，在div同级位置插入如下代码(替换成自己的链接id)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<---<div>复制的代码</div>--->
<div>
<!--网易云音乐插件-->
<!-- require APlayer -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer@1.10.1/dist/APlayer.min.css">
<script src="https://cdn.jsdelivr.net/npm/aplayer@1.10.1/dist/APlayer.min.js"></script>
<!-- require MetingJS-->
<script src="https://cdn.jsdelivr.net/npm/meting@2.0.1/dist/Meting.min.js"></script> 
<!--网易云playlist外链地址-->   
<meting-js
    server="netease"
    type="playlist" 
    id="8425659719"
    mini="false"
    fixed="false"
    list-folded="true"
    autoplay="false"
    volume="0.4"
    theme="#FADFA3"
    order="list"
    loop="all"
    preload="auto"
    mutex="true">
</meting-js></div>

注意：歌单中包含vip删掉后也没用，必须重新创建歌单重新拉取，否则会出现资源加载失败或者div不显示等问题

开启全局配置

即播放进度不会随着网页的切换而中断，需要进行全局配置。
打开source/themes/hexo-theme-next-8.11.0/layout/_layout.njk文件，复制以下语句到标签后

1
2
<!--pjax：防止跳转页面音乐暂停-->
 <script src="https://cdn.jsdelivr.net/npm/pjax@0.2.8/pjax.js"></script>

最后改主题配置 打开主题配置文件_config.yml假如有映射则是_config.next.yml,找到 pjax 参数 enable改为true

文章相关功能

置顶文章

首先卸载原插件并安装置顶插件,打开根目录文件夹，右键Git Bash分别执行：

1
2
npm uninstall hexo-generator-index --save
npm install hexo-generator-index-pin-top --save

在想要置顶的文章日期后面加入top: true

1
2
3
<--title: Hexo主题美化-->
<--date: 2023-05-18 11:09:52-->
top: true

最后设置置顶标志,打开主题文件夹目录下\layout_macro\post.njk文件，在<div class=“post-meta”>下引入

1
2
3
4
5
{% if post.top %}
    <i class="fa fa-thumb-tack"></i>
    <font color="RED">置顶</font>
    <span class="post-meta-divider">|</span>
{% endif %}

只显示摘要

找到主题配置文件_config.yml中的excerpt_description:true改为excerpt_description:false

改好配置后，可以利用两种方式在显示摘要：
1.在文章日期后面加入description:“摘要内容”
2.在文章内容需要显示的部分后面加入<!--more-->

更改内链文本样式

打开主题文件夹下的 source/css_common/components/post/post.styl 文件，然后在文末加上下面这段代码即可。

1
2
3
4
5
6
7
8
9
10
11
// 文章内链接文本样式
.post-body p a{
  color: #0593d3; //原始链接颜色
  border-bottom: none;
  border-bottom: 1px solid #0593d3; //底部分割线颜色
  &:hover {
    color: #fc6423; //鼠标经过颜色
    border-bottom: none;
    border-bottom: 1px solid #fc6423; //底部分割线颜色
  }
}

显示字数和阅读时间

安装hexo-word-counter统计文章的字数以及预期阅读时间插件

1
2
$ npm install hexo-word-counter
$ hexo clean

打开根目录配置_config.yml文件，在文件尾部插入

1
2
3
4
5
6
7
8
9
symbols_count_time:
  symbols: true
  time: true
  total_symbols: true
  total_time: true
  exclude_codeblock: false
  awl: 4
  wpm: 275
  suffix: "mins."

打开主题配置文件，修改

1
2
3
4
5
# Post wordcount display settings
# Dependencies: https://github.com/next-theme/hexo-word-counter
symbols_count_time:
  separated_meta: true
  item_text_total: false

文章加密

  • 安装hexo-blog-encrypt插件
    1
    npm install hexo-blog-encrypt
  • 使用方法
    1

版权声明

打开主题配置文件，找到creative_commons:修改

1
2
sidebar: true
post: true

添加感谢阅读字样，打开 themes/next/layout/_macro 中新建 passage-end-tag.njk 文件,并添加以下内容：

1
2
3
4
5
<div>
    {% if not is_index %}
        <div style="text-align:center;color: #ccc;font-size:14px;">-------------本文结束<i class="fa fa-paw"></i>感谢您的阅读-------------</div>
    {% endif %}
</div>

打开themes\next\layout_macro\post.njk文件，在post-body之后，post-footer 之前添加如下代码:

1
2
3
4
5
6
<div>
  {% if not is_index %}
    {% include 'passage-end-tag.njk' %}
  {% endif %}
</div>

打开主题配置文件，在末尾添加：

1
2
passage_end_tag:
  enabled: true
-------------本文结束感谢您的阅读-------------