关于博客的个性化设置

前言

很多人都想拥有个人风格的博客,我也参考了很多小伙伴关于hexo搭建博客个性化设置的文章,我总结了以下比较实用的几点,希望对有需要的小伙伴能有所帮助
我选用的是NexT:首先是这个主题的样式简洁大方,却又不失强大的功能。再者就是主题作者对此开源项目的维护较好,所以我选择了 NexT 主题。
其中选择Scheme是Pisces,双栏 Scheme,小家碧玉似的清新,很清晰的结构,当然也可以根据个人喜好进行选择

1.设置头像

编辑主题配置文件, 修改字段 avatar, 值设置成头像的链接地址。其中,头像的链接地址可以是:

地址
完整的互联网 URI http://example.com/avatar.png
站点内的地址 将头像放置主题目录下的 source/uploads/ (新建 uploads 目录若不存在)配置为:avatar: /uploads/avatar.png或者 放置在 source/images/ 目录下配置为:avatar: /images/avatar.png

2.优化主题siderbar的头像

就是为主题siderbar头像添加圆形化旋转的效果。修改/themes/next/source/css/_common/components/sidebar/sidebar-author.styl 文件,我的整个 sidebar-author.styl 文件的代码如下,你可以直接复制这段代码去替换你这个文件中的所有代码。
  有一个注意事项,就是你要保证你的头像,也就是 avatar.jpg 这个图片是正方形,不是的话你要将其修改成正方形,这样才能通过样式将其展现为很好看的正圆,否则会是一个椭圆形。

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
.site-author-image {
display: block;
margin: 0 auto;
padding: $site-author-image-padding;
max-width: $site-author-image-width;
height: $site-author-image-height;
border: $site-author-image-border-width solid $site-author-image-border-color;
/* 头像圆形 */
border-radius: 80px;
-webkit-border-radius: 80px;
-moz-border-radius: 80px;
box-shadow: inset 0 -1px 0 #333sf;
/* 设置循环动画 [animation: (play)动画名称 (2s)动画播放时长单位秒或微秒 (ase-out)动画播放的速度曲线为以低速结束 (1s)等待1秒然后开始动画 (1)动画播放次数(infinite为循环播放) ]*/
-webkit-animation: play 2s ease-out 1s 1;
-moz-animation: play 2s ease-out 1s 1;
animation: play 2s ease-out 1s 1;
/* 鼠标经过头像旋转360度 */
-webkit-transition: -webkit-transform 1.5s ease-out;
-moz-transition: -moz-transform 1.5s ease-out;
transition: transform 1.5s ease-out;
}
img:hover {
/* 鼠标经过停止头像旋转
-webkit-animation-play-state:paused;
animation-play-state:paused;*/
/* 鼠标经过头像旋转360度 */
-webkit-transform: rotateZ(360deg);
-moz-transform: rotateZ(360deg);
transform: rotateZ(360deg);
}
/* Z 轴旋转动画 */
@-webkit-keyframes play {
0% {
-webkit-transform: rotateZ(0deg);
}
100% {
-webkit-transform: rotateZ(-360deg);
}
}
@-moz-keyframes play {
0% {
-moz-transform: rotateZ(0deg);
}
100% {
-moz-transform: rotateZ(-360deg);
}
}
@keyframes play {
0% {
transform: rotateZ(0deg);
}
100% {
transform: rotateZ(-360deg);
}
}
.site-author-name {
margin: $site-author-name-margin;
text-align: $site-author-name-align;
color: $site-author-name-color;
font-weight: $site-author-name-weight;
}
.site-description {
margin-top: $site-description-margin-top;
text-align: $site-description-align;
font-size: $site-description-font-size;
color: $site-description-color;
}

3.字体和颜色的设置

在 \themes\next\source\css_variables\custom.styl 文件中添加以下代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// 标题,修改成你期望的字体族
$font-family-headings = Georgia, sans
// 修改成你期望的字体族
$font-family-base = "Microsoft YaHei", Verdana, sans-serif
// 代码字体
$code-font-family = "Input Mono", "PT Mono", Consolas, Monaco, Menlo, monospace
// 正文字体的大小
$font-size-base = 16px
// 代码字体的大小
$code-font-size = 14px
// 代码块颜色
$code-foreground = #dd0055
// Background color for <body>
$body-bg-color = #e7e5dc //theme mist use #fdfdfd
// text-color
$text-color = #353535s

4.为博客加上GitHub丝带

如果是Next主题(其他主题也差不多),添加GitHub丝带:在themes\next\layout_layout.swig中加入相关代码,记得修改自己的链接。

相关代码你可以在GitHub官方网站GitHub Ribbons上进行选择。

5. 设置代码的高亮主题

6. 如何设置「阅读全文」

在首页显示一篇文章的部分内容,并提供一个链接跳转到全文页面是一个常见的需求。 NexT 提供三种方式来控制文章在首页的显示方式。 也就是说,在首页显示文章的摘录并显示 阅读全文 按钮,可以通过以下方法:

  1. 在文章中使用 手动进行截断,Hexo 提供的方式 推荐
  2. 在文章的 front-matter 中添加 description,并提供文章摘录
  3. 自动形成摘要,在 主题配置文件 中添加:
    1
    2
    3
    auto_excerpt:
    enable: true
    length: 150

默认截取的长度为 150 字符,可以根据需要自行设定

参考 HEXO+GitHub搭建博客 - 优化
NexT的主题配置

坚持原创技术分享,您的支持将鼓励我继续创作!