学习笔记

孜孜不倦，蒸蒸日上

0%

Hexo美化

发表于 分类于 阅读次数： Valine：

下面是我比较喜欢的美化，亲测有效(根据next7.8)

Next 7.x / 8.x 自动添加可切换的暗黑模式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
//安装 hexo-next-darkmode 插件

npm install hexo-next-darkmode --save

//在 Next 主题的 _config.yml 配置文件里添加以下内容

# Darkmode JS
# For more information: https://github.com/rqh656418510/hexo-next-darkmode, https://github.com/sandoche/Darkmode.js
darkmode_js:
enable: true
bottom: '64px' # default: '32px'
right: 'unset' # default: '32px'
left: '32px' # default: 'unset'
time: '0.5s' # default: '0.3s'
mixColor: 'transparent' # default: '#fff'
backgroundColor: 'transparent' # default: '#fff'
buttonColorDark: '#100f2c' # default: '#100f2c'
buttonColorLight: '#fff' # default: '#fff'
isActivated: false # default false
saveInCookies: true # default: true
label: '🌓' # default: ''
autoMatchOsTheme: true # default: true
libUrl: # Set custom library cdn url for Darkmode.js

isActivated: true：默认激活暗黑/夜间模式，请始终与 saveInCookies: false、autoMatchOsTheme: false 一起使用

关闭原生的暗黑模式
确保 Next 原生的 darkmode 选项设置为 false，在 Next 的 _config.yml 配置文件中更改 darkmode: false

添加鼠标点击显示字体效果

在 /themes/next/source/js 下新建文件 click_show_text.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
var a_idx = 0;
jQuery(document).ready(function($) {
    $("body").click(function(e) {
        var a = new Array
        ("Js", "Css", "HTML", "Json", "Vue", "Node", "Webpack", "git", "Jquery", "Html5", "Css3", "react");
        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": 5,
            "top": y - 20,
            "left": x,
            "position": "absolute",
            "font-weight": "bold",
            "color": "#FF0000"
        });
        $("body").append($i);
        $i.animate({
            "top": y - 180,
            "opacity": 0
        },
			3000,
			function() {
			    $i.remove();
			});
    });
    setTimeout('delay()', 2000);
});

function delay() {
    $(".buryit").removeAttr("onclick");
}

想要每次点击显示的文字为不同颜色，可以将其中 color 值进行如下更改：

1
"color": "rgb(" + ~~(255 * Math.random()) + "," + ~~(255 * Math.random()) + "," + ~~(255 * Math.random()) + ")"

然后在 \themes\next\layout\layout.swig 文件中添加以下代码

1
<script type="text/javascript" src="/js/click_show_text.js"></script>

最最最（重要的字说三遍）重要的来了，
可能你会报错JQ找不到，那是没引入JQ，在上面之前引入JQ即可，即：

1
2
3
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.8.3/jquery.js"></script>
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="/js/click_show_text.js"></script>

添加网站雪花飘落效果

在 /themes/next/source/js 下新建文件 snow.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
(function($){
	$.fn.snow = function(options){
	var $flake = $('<div id="snowbox" />').css({'position': 'absolute','z-index':'9999', 'top': '-50px'}).html('&#10052;'),
	documentHeight 	= $(document).height(),
	documentWidth	= $(document).width(),
	defaults = {
		minSize		: 10,
		maxSize		: 20,
		newOn		: 1000,
		flakeColor	: "#AFDAEF" /* 此处可以定义雪花颜色，若要白色可以改为#FFFFFF */
	},
	options	= $.extend({}, defaults, options);
	var interval= setInterval( function(){
	var startPositionLeft = Math.random() * documentWidth - 100,
	startOpacity = 0.5 + Math.random(),
	sizeFlake = options.minSize + Math.random() * options.maxSize,
	endPositionTop = documentHeight - 200,
	endPositionLeft = startPositionLeft - 500 + Math.random() * 500,
	durationFall = documentHeight * 10 + Math.random() * 5000;
	$flake.clone().appendTo('body').css({
		left: startPositionLeft,
		opacity: startOpacity,
		'font-size': sizeFlake,
		color: options.flakeColor
	}).animate({
		top: endPositionTop,
		left: endPositionLeft,
		opacity: 0.2
	},durationFall,'linear',function(){
		$(this).remove()
	});
	}, options.newOn);
    };
})(jQuery);
$(function(){
    $.fn.snow({ 
	    minSize: 5, /* 定义雪花最小尺寸 */
	    maxSize: 50,/* 定义雪花最大尺寸 */
	    newOn: 300  /* 定义密集程度，数字越小越密集 */
    });
});

然后在 \themes\next\layout\layout.swig 文件中添加以下代码
如遇到JQ找不到，参考第一种特效解决方法

1
<script type="text/javascript" src="\js\snow.js"></script>

在文章末尾添加“文章结束”标记

在主题/layout/_macro 下新建 passage-end-tag.swig 文件，并添加以下代码

1
<div style="text-align:center;color: #000;font-size:16px;">------ The End ------</div>

打开 /themes/next/layout/_macro/post.swig 文件，在 END POST BODY 后面引入 passage-end-tag.swig，如下

1
2
3
4
5
6
{#####################}
{### END POST BODY ###}
{#####################}
{% if theme.passage_end_tag.enable and not is_index %}
{% include 'passage-end-tag.swig' %}
{% endif %}

在主题配置文件 _config.yml 的末尾添加以下配置

1
2
passage_end_tag:
  enable: true

侧边栏背景设置

打开themes\next\source\css_partial\sidebar.styl
此配置文件中，可以找到 .sidebar(我的没有只有#sidebar,所以我f12查看了标签找到新的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
25
26
.mdui-drawer {
    //设置背景图片，图片放在Hexo\themes\theme-Meadow\source\images目录下
    background:url(/images/sidebar.jpg);	
    background-size: cover;
    background-position:center;
    background-repeat:no-repeat;
    bottom: 0;
    if (not hexo-config('back2top.sidebar')) {
        box-shadow: inset 0 2px 6px black;
    }
    position: fixed;
    top: 0;
    transition: all $transition-ease-out;
    width: $sidebar-desktop;
    z-index: $zindex-2;

    a {
        //设置文字颜色
        border-bottom-color: #FFFFFF;
        color: #FFFFFF;
        &:hover {
            border-bottom-color: $FFFFFF;
            color: #FFFFFF;
        }
    }
}

更换背景

在themes\next\source\css\main.styl文件最下面添加下面代码即可

1
2
3
4
5
6
7
8
9
10
11
body {
    background:url(/images/bg01.jpg);
    background-repeat: no-repeat;
    background-attachment:fixed;
    background-position:50% 50%;
    color: var(--text-color);
    font-family: 'Lato', "PingFang SC", "Microsoft YaHei", sans-serif;
    font-size: 1em;
    line-height: 2;

}

设置透明度和中心文章栏加圆角

单设置了背景图片还不是很完美，我们给所有的栏目设置一个小小的透明，会显得效果很好。
在themes\next\source\css\main.styl文件最下面添加下面代码即可

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// 侧边标题栏更改透明度
.header-inner {
    opacity: 0.8;
}

// 侧边头像栏更改透明度
.sidebar{
    transition-duration: 0.4s;  
    opacity: 0.8;  // 透明度
}

// 中心文章栏更改透明度
.content {
  padding-top: 15px;
  opacity: 0.9;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
//加圆角
//第一个文章
.post-block {
  background: var(--content-bg-color);
  border-radius: 10px 10px 10px 10px; //边框圆角
  box-shadow: 0 2px 2px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.06), 0 1px 5px 0 rgba(0,0,0,0.12);
  padding: 40px;
}
//之后的所有文章
.post-block + .post-block {
  border-radius: 10px 10px 10px 10px; //边框圆角
  box-shadow: 0 2px 2px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.06), 0 1px 5px 0 rgba(0,0,0,0.12), 0 -1px 0.5px 0 rgba(0,0,0,0.09);
  margin-top: 12px;
}

[Read More]按钮样式: 黑底绿字

在themes\next\source\css\main.styl文件最下面添加如下代码即可

1
2
3
4
.post-button .btn:hover {
  color: rgb(136, 255, 13) !important;
	background-color: rgba(0, 0, 0, 0.75); //black
}

页面底部页码样式

在themes\next\source\css\main.styl文件最下面添加如下代码即可

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// 页面底部页码
.pagination .page-number.current {
    border-radius: 100%;
    background-color: rgba(50, 50, 50, 0.75);
}

// 页面底部页码, 去除鼠标置于上方时，数字上方的线
.pagination .prev, .pagination .next, .pagination .page-number {
    margin-bottom: 10px;
    border: none;
	color: rgb(1, 1, 1);
}

// 页面底部页码，鼠标置于上方，黑底绿字
.page-number:hover,.page-number:active{
	color: rgb(136, 255, 13);
  border-radius: 100%;
	background-color: rgba(0, 0, 0, 0.75); //black
}

修改分类页的页面样式

在themes\next\source\css\main.styl文件最下面添加如下代码即可

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
// 分类&&标签 页面样式
.post-block.page {
    margin-top: 40px;
}
// 分类页面page
.category-all-page {
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5);
    background-color: #797D7F;
    padding: 20px 30px 60px 30px;
    border-radius: 25px 25px 25px 25px;
}
.category-all-title {
    font-family: Impact;
    font-size: 24px;
    color: aqua;
}
.category-list {
    overflow: auto;
}
.category-list li {
    height: 100%;
    float: left;
    border-right: 3px solid #222;
    padding: 0 20px;
}
.category-all ul li {
    list-style: none!important;
}
.category-list li:last-child {
    border-right: none;
}
.category-list li a {
    font-size: 16px;
    text-decoration: none;
    color: chartreuse;
    font-family: Helvetica, Verdana, sans-serif;
    // text-transform: uppercase;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
.category-list li a:hover {
    color: black;
}
.category-list li.active a {
    font-weight: bold;
    color: black;
}

修改彩色标签页的页面样式

在 /themes/next/layout/ 目录下，新增 tag-color.swig 文件，填入如下内容:

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
//直接覆盖掉源文件
<script type="text/javascript">
     var alltags = document.getElementsByClassName('tag-cloud-tags');
     var tags = alltags[0].getElementsByTagName('a');
     for (var i = tags.length - 1; i >= 0; i--) {
       var r=Math.floor(Math.random()*75+130);
       var g=Math.floor(Math.random()*75+100);
       var b=Math.floor(Math.random()*75+80);
       tags[i].style.background = "rgb("+r+","+g+","+b+")";
     }
</script>

<style>
  .tag-cloud-tags{
    /*font-family: Helvetica, Tahoma, Arial;*/
    /*font-weight: 100;*/
    text-align: center;
    counter-reset: tags;
  }
  .tag-cloud-tags a{
    border-radius: 6px;
    padding-right: 5px;
    padding-left: 5px;
    margin: 8px 5px 0px 0px;
  }
  .tag-cloud-tags a:before{
    content: "🔖";
  }

  .tag-cloud-tags a:hover{
     box-shadow: 0px 5px 15px 0px rgba(0,0,0,.4);
     transform: scale(1.1);
     /*box-shadow: 10px 10px 15px 2px rgba(0,0,0,.12), 0 0 6px 0 rgba(104, 104, 105, 0.1);*/
     transition-duration: 0.15s;
  }
</style>

在同级目录的 page.swig 中引入 tag-color.swig

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
//找一下有没有相识的这一段，有的话覆盖掉，没有就粘贴上去  
<div class="tag-cloud">

        <!-- 目前共计xxx个标签
        <div class="tag-cloud-title">
            {{ _p('counter.tag_cloud', site.tags.length) }}
        </div>
        -->
    
        <div class="tag-cloud-tags">
          {{ tagcloud({min_font: 10, max_font: 15, amount: 300, color: true, start_color: '#ccc', end_color: '#111'}) }}
        </div>
      </div>
    
+     {% include 'tag-color.swig' %}
    
    {% elif page.type === 'categories' %}
      <div class="category-all-page">
        <div class="category-all-title">
            {{ _p('counter.categories', site.categories.length) }}
        </div>
        <div class="category-all">
          {{ list_categories() }}
        </div>
      </div>

去掉博客顶部黑线

在themes\next\source\css\main.styl文件最下面添加如下代码即可

1
2
//去掉博客顶部黑线
.headband {display:none;}

改掉题头颜色

在themes\next\source\css\main.styl文件最下面添加如下代码即可

1
2
3
4
//改掉题头颜色
.site-brand-container {
  background: ; //修改为自己喜欢的颜色
}

相册

可以利用 next 的插件 group picture 来实现，他的原理很简单，就是利用 next 主题的 Tag Plugin 这种语法提供了一种展示图片的布局。

需要以下几步：

首先 hexo new page photos 新建一个名为 photos 的标签页，并且在 themes/next/languages/zh-CN.yml 中的 menu 一项下面添加 photos: 相册，这样在首页菜单栏才会显示中文相册。
其次，可以直接在 source/photos/index.md 写文章，并在需要插入图片的时候用以下方式来组织你的图片列表：

1
2
3
4
5
6
7
8
9
10
11
## 某某地方玩
{% gp 6-3 %}
  ![](/images/docs/github.png)
  ![](/images/docs/github.png)
  ![](/images/docs/github.png)
  ![](/images/docs/github.png)
  ![](/images/docs/github.png)
  ![](/images/docs/github.png)
{% endgp %}

其中 ‘6-3’ 的意思是改组一共有六张图片，每行排最多三张。除了图片之外其他的文字和章节标题都可以像往常一样加

为Next主题添加Valine评论系统，可参考这个

….后续更新

------ The End ------
您的认可是我不断进步的动力！