Fork me on GitHub

hexo优化之路-进阶篇

   我这篇文章主要是讲解以next主题的各项高度定制设置,让自己的博客更加美化。(网上有很多关于Next主题的配置方法,我主要是把网上找到的各个设置做个汇总吧.NexT是一款简洁优雅且易于使用的主题,配置比较简单,只需要稍微修改配置文件即可,功能也比较全,分类、归档、标签显示明了,让人一看就知道干嘛的

进度条

  1. 下载 module 文件,进入~/blog/themes/next` 目录,输入以下指令

    1
    git clone https://github.com/theme-next/theme-next-pace source/lib/pace
  2. 修改配置文件

    1
    pace: true
  3. 设置进度条样式,打开http://github.hubspot.com/pace/docs/welcome/ 选择自己喜欢的样式进行样式配置

    1
    pace_theme: pace-theme-flash # 这里可以选择替换成自己喜欢的样式

设置侧边栏设置圆形可旋转头像

设置效果:

设置方法:

找到生成的Hexo目录themes/next/source/css_common/components/sidebar下的sidebar-author.styl,将里面的css样式内容全部替换为:

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
.site-author-image {
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: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
transition: 1.4s all;
}

.site-author-image:hover {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-transform: rotate(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;
}

本文标题:hexo优化之路-进阶篇

文章作者:孤城落寞

发布时间:2018年10月29日 - 11:13:05

最后更新:2019年02月21日 - 22:02:55

原始链接:https://blog.gclmit.club/archives/d156e876.html

许可协议: 署名-非商业性使用-禁止演绎 4.0 国际 转载请保留原文链接及作者。



-------------本文结束 感谢您的阅读-------------
坚持原创技术分享,您的支持将鼓励我继续创作!