添加头像
编辑主题的 _config.yml
,修改字段 avatar
, 的url
值设置成头像的链接地址。
其中,头像的链接地址可以是:
1.完整的互联网 URL
2.站点内的地址,例如:
/uploads/avatar.jpg
需要将你的头像图片放置在站点
的source/uploads/
(可能需要新建uploads目录)/images/avatar.jpg
需要将你的头像图片放置在主题
的source/images/
目录下。
avatar:
# 头像位置
url: /images/avatar.jpg
# 如果为真, 头像将以圆形显示。
rounded: false
# 如果为真, 头像将随着光标旋转。
rotated: false
圆形、旋转特效(新版已无需修改代码)
修改文件/themes/next/source/css/_common/components/sidebar/sidebar-author.styl
.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;
/* 头像圆形样式 */
/* start */
border-radius: 50%
webkit-transition: 1.4s all;
moz-transition: 1.4s all;
ms-transition: 1.4s all;
transition: 1.4s all;
/* end */
}
.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;
}
/* 头像旋转事件 */
/* start */
.site-author-image:hover {
background-color: #55DAE1;
webkit-transform: rotate(360deg) scale(1.1);
moz-transform: rotate(360deg) scale(1.1);
ms-transform: rotate(360deg) scale(1.1);
transform: rotate(360deg) scale(1.1);
}
/* end */