Hexo 头像设置

Garry

July 11, 2019

3796 views

No comments

1608 words

教程

### 添加头像

编辑主题的 `_config.yml`，修改字段 `avatar`， 的`url`值设置成头像的链接地址。

其中，头像的链接地址可以是：

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

听说，打赏我的人都找到了真爱！

Hexo 头像设置

Garry • 2019 年 07 月 11 日

Hexo 头像设置

听说，点赞的人都找到了真爱！！

Leave a Comment Cancel reply
使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款

荷兰Orientation Year(找工作)签证申请指南

Hexo Next主题使用LeanCloud统计文章阅读次数、添加热度排行页面

意大利罗马ATAC交通卡(含优惠卡)办理指南

意大利罗马学生健康卡申请(医保办理)指南

意大利罗马学生ISEE办理指南

意大利罗马学生健康卡申请(医保办理)指南

如何在罗马接种9价HPV疫苗？

意大利罗马学生ISEE办理指南

Hexo 发布blog到腾讯云cos

Homeassistant拆分自动化文件

Hexo 头像设置

听说，点赞的人都找到了真爱！！

Leave a Comment Cancel reply 使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款

Hexo 头像设置

Leave a Comment Cancel reply
使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款