【杂谈】hexo网站next主题背景图片和超链接颜色问题

网站背景:

• 打开主题配置文件即blog/themes/next下的config.yml，将 style: source/data/styles.styl 前面的#去掉取消注释

custom_file_path:
  style: source/_data/styles.styl

• 打开根目录 Blog/source 创建文件 _data/styles.styl , 添加以下内容

  注意:图片的地址不用改, 但是要将想要改的图片放到 Blog\themes\next\source\images 并将图片改名为 background.png

// 添加背景图片
body {
      background: url(/images/background.png);//自己喜欢的图片地址
      background-size: cover;
      background-repeat: no-repeat;
      background-attachment: fixed;
      background-position: 50% 50%;
}

网站超链接颜色:

• 打开 Blog\themes\next\source\css\_common\components\post 路径下的post.styl , 并在底部添加如下代码

  a:not(.btn){
    color: #90EE90; //超链接显示颜色
    border-bottom: none;
    &:hover {
  	color: #00FA9A;  //鼠标移动上去后超链接颜色
  	font-weight: bold;
  	text-decoration: underline;
  	}
    }
  

• 颜色码链接: RGB颜色值与十六进制颜色码转换工具 (sioe.cn)

侧边栏背景:

• 注意: 本文仅针对next主题.

  对于 Muse 和 Mist主题, 其侧边栏的配置文件为 Blog\themes\next\source\css\_schemes\Muse

  对于 Pisces和 Gemini主题，其侧边栏的配置文件为 Blog\themes\next\source\css\_schemes\Pisces

• 在 _sidebar.styl 文件底部添加如下内容

  .sidebar {
    //设置背景图片，图片放在Hexo\themes\hexo-theme-next\source\images目录下
    background:url(/images/sidebar-bg.jpg);	
    background-size: cover;
    background-position:center;
    background-repeat:no-repeat;
    bottom: 0;
    if (not hexo-config('back2top.sidebar')) {
      box-shadow: inset 0 2px 6px black;
    }
    position: fixed;
    top: 0;
    transition: all $transition-ease-out;
    width: $sidebar-desktop;
    z-index: $zindex-2;
  
    a {
      //设置文字颜色
  	border-bottom-color: #FFFFFF;
  	color: #FFFFFF;
      &:hover {
  	  border-bottom-color: $FFFFFF;
  	  color: #FFFFFF;
      }
    }
  }
  

• 修改侧边栏中头像下方的作者姓名和描述的字体颜色, 需要在 Blog\_config.yml 中修改

  # Site
  description: 像珍惜礼物一样，珍惜今天。     #简介或者格言 不修改颜色版本
  description: <font color="#000000">像珍惜礼物一样，珍惜今天。</font>     #简介或者格言  修改颜色版本"#000000"就是对应的颜色 两个版本二选其一