Hexo+Next 主页以及侧边栏头像旋转

最近优化自己的博客,换了个NexT主题。使用的是NexT主题的Muse样式。
我的博客
在进行了NexT主题的安装和常规设置成功之后。这里讲解如何在首页author上方显示圆形头像,在鼠标放上的时候头像进行旋转以及侧边栏头像的圆形和旋转设置。

主页显示头像

  1. 主页设置显示头像
    Muse样式默认主页是不显示头型的,只显示作者、简介和菜单。
    打开主题配置文件Blog—>themes—>next—>_config.yml,找到custom_logo字段
    1.1 打开主页header上头像的显示,将enabled设为true.
    1.2 image必须是图片的网络地址
    实现了头像显示
    custom-logo.png

  2. 现在首页头部显示头像是正方形的,根据字段custom-logo,找到NexT主题关于custom-logo的设置。发现了_logo.styl文件,目录为Blog—>themes—>next—>source—>css—>_schemes—>Muse—>_logo.styl
    要实现圆形显示,而且实现旋转效果。
    对于构建网页来说,CSS文件是控制网页内容如何显示的。
    打开_logo.styl文件,发现custom-logo-image字段,猜测应该就是对应头像了,增加对于头像custom-logo-image的设置。
    添加代码如下代码即可

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    .custom-logo-image {
    margin: 0 auto;
    padding: 5px;
    max-width: 150px;
    background: white;
    /* start*/
    border-radius: 50% #头像圆角
    transition: 2.5s all; #旋转动画时间
    }

    .custom-logo-image:hover {
    transform: rotate(360deg); #旋转角度
    }
    /* end */
  3. 在Blog目录重启服务即可实现。
    最终实现效果展示:
    custom_logo.gif


侧边栏头像旋转

侧边栏显示的头像设置成圆形,并且鼠标滑过头像旋转的设置和主页的头像设置差不多。进入CSS文件,找到关于sidebar中关于作者的设置文件。NexT主题关于sidebar的基础设置位于文件夹_common中,改变此文件夹内文件,会改变所有主题的相对应设置。

  1. 打开Blog—>themes—>next—>source—>css—>_common—>components—>sidebar—>sidebar-author.styl
  2. 修改关于.site-author-image的设置,改成如下代码

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    .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: 60%
    transition: 2.5s all;
    }

    .site-author-image:hover {
    background-color: #55DAE1; #背景颜色
    transform: rotate(360deg);
    }
    /* end */
  3. 重新启动服务器Blog:hexo s

-------------本文结束感谢您的阅读-------------

我的传送门:博客简书GitHub