Loading... ### 添加头像 编辑主题的 `_config.yml`,修改字段 `avatar`, 的`url`值设置成头像的链接地址。 其中,头像的链接地址可以是: <!--more--> 1.完整的互联网 URL 2.站点内的地址,例如: * `/uploads/avatar.jpg`需要将你的头像图片放置在`站点`的 `source/uploads/`(可能需要新建uploads目录) * `/images/avatar.jpg`需要将你的头像图片放置在`主题`的 `source/images/` 目录下。 ```yaml avatar: # 头像位置 url: /images/avatar.jpg # 如果为真, 头像将以圆形显示。 rounded: false # 如果为真, 头像将随着光标旋转。 rotated: false ``` ### 圆形、旋转特效(新版已无需修改代码) 修改文件`/themes/next/source/css/_common/components/sidebar/sidebar-author.styl` ```css .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 */ ``` 听说,点击下方广告的人都找到了真爱! Last modification:April 7, 2021 © Allow specification reprint Support Appreciate the author AliPayWeChat Like 听说,打赏我的人都找到了真爱!