爱梦的博客

常常与我陪伴的就是梦

0%

Hexo博客美化过程

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

博客美化

默认主题

1.对默认主题下的_config.yml文件进行部分项修改
注: 博客文件夹\_config.yml

1
2
3
4
5
6
7
8
# Site
title: #网站标题
subtitle: #子标题
description: #描述
keywords: #网站关键字
author: #网站作者
language: zh-CN
timezone: ''

设置主题的默认显示语言
language: zh-CN

设置代码高亮—后面在hightlight.js中使用

1
2
3
4
5
6
7
highlight:
  enable: true
  line_number: true
  auto_detect: true
  tab_replace:
  wrap: true
  hljs: false

next主题

1.对next主题下的_config.yml文件进行部分项修改
注: 博客文件夹\themes\next\_config.yml

设置在主题中显示的头像图片, 图片相对路径为next/source.
avatar:
url: /images/head_Picture/Yu_Me2.png

把前面#符号去掉即表示使用该风格

1
2
3
4
5
# Schemes
#scheme: Muse
scheme: Mist
#scheme: Pisces
#scheme: Gemini

显示分类/标签/归档页的内容量
menu_settings:
icons: true
badges: true

页面特效

(1)网页鼠标点击特效: 爱心
注: 由于博客使用的是next主题, 所以指定文件夹为: next/source/js/src

新建文本文件并改名为clickLove.js, 打开文件将以下内容复制进去并保存后放入指定文件夹中.

1
!function(e,t,a){function n(){c(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: fixed;}.heart:after{top: -5px;}.heart:before{left: -5px;}"),o(),r()}function r(){for(var e=0;e<d.length;e++)d[e].alpha<=0?(t.body.removeChild(d[e].el),d.splice(e,1)):(d[e].y--,d[e].scale+=.004,d[e].alpha-=.013,d[e].el.style.cssText="left:"+d[e].x+"px;top:"+d[e].y+"px;opacity:"+d[e].alpha+";transform:scale("+d[e].scale+","+d[e].scale+") rotate(45deg);background:"+d[e].color+";z-index:99999");requestAnimationFrame(r)}function o(){var t="function"==typeof e.onclick&&e.onclick;e.onclick=function(e){t&&t(),i(e)}}function i(e){var a=t.createElement("div");a.className="heart",d.push({el:a,x:e.clientX-5,y:e.clientY-5,scale:1,alpha:1,color:s()}),t.body.appendChild(a)}function c(e){var a=t.createElement("style");a.type="text/css";try{a.appendChild(t.createTextNode(e))}catch(t){a.styleSheet.cssText=e}t.getElementsByTagName("head")[0].appendChild(a)}function s(){return"rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")"}var d=[];e.requestAnimationFrame=function(){return e.requestAnimationFrame||e.webkitRequestAnimationFrame||e.mozRequestAnimationFrame||e.oRequestAnimationFrame||e.msRequestAnimationFrame||function(e){setTimeout(e,1e3/60)}}(),n()}(window,document);

(2)网页鼠标点击特效: 文字
注: 同理

新建文本文件并改名为clickSocialValue.js, 打开文件将以下内容复制进去并保存后放入指定文件夹中.

1
2
var a_idx = 0;jQuery(document).ready(function($) {$("body").click(function(e) {var a = new Array("萝莉", "御姐", "粉毛", "黑长直", "双马尾", "呆毛", "异色瞳", "眼睛娘", "虎牙", "兽耳", "贫乳", "仆娘");var $i = $("<span/>").text(a[a_idx]);
a_idx = (a_idx + 1) % a.length;var x = e.pageX,y = e.pageY;$i.css({"z-index": 100000000,"top": y - 20,"left": x,"position": "absolute","font-weight": "bold","color": "rgb(" + ~~(255 * Math.random()) + "," + ~~(255 * Math.random()) + "," + ~~(255 * Math.random()) + ")"});$("body").append($i);$i.animate({"top": y - 180,"opacity": 0},1500,function() {$i.remove();});});});

(1+2)在_layout.swig文件中的body标签内引入js文件
注: next/layout/_layout.swig

1
2
3
<script src="https:\//cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="/js/src/clicklove.js"></script>
<script type="text/javascript" src="/js/src/clicksocialvalue.js"></script>

(3)网页悬浮带色线条
在_layout.swig文件中的body标签内引入js文件

1
2
3
<script type="text/javascript"
    color="220,220,220" opacity='0.7' zIndex="-2" count="200" src="//cdn.bootcss.com/canvas-nest.js/1.0.0/canvas-nest.min.js">
</script>

注: color属性为线条颜色, opacity属性为线条透明度, count属性为线条的总数, zIndex属性为线条显示所在层.

aplayer播放器

aplayer是一个HTML5音乐播放器, 和dplayer师出同门.

(1)访问aplayer源码:GitHub Aplayer, 将文件下载到本地, 解压后将名为dist的文件夹复制到博客文件夹\themes\next\source文件夹下.

(2)在dist文件夹下新建music.js文件, 并在该文件里添加以下代码:
注: 文件存放相对路径是为博客文件夹\source\下

const ap = new APlayer({
    container: document.getElementById('aplayer'),
    autoplay: false,
    loop: 'all',
    volume: 0.7,
    listFolded: true,
    listMaxHeight: 60,
    audio: [
        {
            name: 'name1',
            artist: 'artist1',
            url: 'url1.mp3',
            cover: 'cover1.jpg',
        },
        {
            name: 'name2',
            artist: 'artist2',
            url: 'url2.mp3',
            cover: 'cover2.jpg',
        },
        ...
    ]
});

(3)根据参数修改成自己想要的样式, 参数参考:官方中文文档.

(4)把aplayer播放器放置到自己想要的位置, 即在布局文件中插入代码段, 网站布局位置文件是在next\layout文件夹下.

1
2
3
4
<link rel="stylesheet" href="/dist/APlayer.min.css">
<div id="aplayer"></div>
<script type="text/javascript" src="/dist/APlayer.min.js"></script>
<script type="text/javascript" src="/dist/music.js"></script>

注: 博主放置的位置是在next\layout\_partials\sidebar\site-overview.swig文件中第61行

提示块

(1)修改_config.yml文件中的note选项

1
2
3
4
note:
  style: simple
  icons: true 
  light_bg_offset: 0

(2)效果展示

1
2
3
{% note default %}
default 提示块标签
{% endnote %}

default 提示块标签

1
2
3
{% note primary %}
primary 提示块标签
{% endnote %}

primary 提示块标签

1
2
3
{% note success %}
success 提示块标签
{% endnote %}

success 提示块标签

1
2
3
{% note info %}
info 提示块标签
{% endnote %}

info 提示块标签

1
2
3
{% note warning %}
warning 提示块标签
{% endnote %}

warning 提示块标签

1
2
3
{% note danger %}
danger 提示块标签
{% endnote %}

danger 提示块标签

Folding容器

1
2
{% folding blue, 1 %}
{% endfolding %}

1

 
1
2
{% folding cyan, 2 %}
{% endfolding %}

2

 
1
2
{% folding green, 3 %}
{% endfolding %}

3

 
1
2
{% folding yellow, 4 %}
{% endfolding %}

4

 
1
2
{% folding red, 5 %}
{% endfolding %}

5
-------------------本文结束 感谢阅读-------------------