加载中...

背景与超链接颜色问题


网站背景:

  • 打开主题配置文件即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"就是对应的颜色 两个版本二选其一

文章作者: 心意
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 心意 !
评论
  目录