修改NexT8.x主题全局样式

全局样式设置

---

• 在source文件夹下新建.styl结尾的文件，我的是variables.styl，代码如下：

  $body-bg-color = #eee;
  $content-bg-color = #fff;
  $card-bg-color = #f5f5f5;
  $text-color = #555;
  $blockquote-color = #666;
  $link-color = #555;
  $link-hover-color = #fc9d9a;
  $brand-color = #fff;
  $brand-hover-color = #fff;
  $table-row-odd-bg-color = #f9f9f9;
  $table-row-hover-bg-color = #f5f5f5;
  $menu-item-bg-color = #ffe4e1;
  $btn-default-bg = #fff;
  $btn-default-color = #fc9d9a;
  $btn-default-border-color = #fc9d9a;
  $btn-default-hover-bg = #fc9d9a;
  $btn-default-hover-color = #fff;
  $btn-default-hover-border-color = #fc9d9a;
  

• 在_config.next.yml中把custom_file_path配置项中的variable选项的注释去除，重新编译即可生效

页面样式设置

---

• 具体选择器名可能版本不同略有不同，可通过hexo s本地运行后在浏览器调试工具中查看，代码如下：

  // 文章目录链接样式
  .sidebar-nav .sidebar-nav-active {
      border-bottom-color: #fc9d9a;
      color: #fc9d9a;
  }
  
  .sidebar-nav .sidebar-nav-active:hover {
      color: #fc9d9a;
  }
  
  a, span.exturl {
      border-bottom: none;
  }
  
  .post-toc .nav .active-current > a {
      color: #fc9d9a;
  }
  
  .post-toc .nav .active > a {
      border-bottom-color: #fc9d9a;
      color: #fc9d9a;
  }
  
  .post-toc .nav .active-current > a:hover {
      color: #fc9d9a;
  }
  
  // 顶部黑线
  .headband {
      background-color: #fc9d9a;
  }
  
  //题头
  .site-brand-container {
      background: #fc9d9a; 
  }
  
  // 返回顶部
  .back-to-top{
      background: #fc9d9a; 
  }
  
  .back-to-top:hover {
      color: #ffffff;
  }
  
  // 设置背景图片
  body {
      background: url(https://img-blog.csdnimg.cn/d0a8fda7ce3349459bd8a440fe06dc00.png);
      background-repeat: no-repeat;
      background-attachment: fixed;
      background-size: cover;
      background-position: 50% 50%;
  }
  
  // 博客内容透明化
  // 文章内容透明化
  
  .main-inner > .sub-menu, .main-inner > .post-block,
  .main-inner > .tabs-comment, .main-inner > .comments,
  .main-inner > .pagination {
      background-color: rgba(255, 255, 255, 0.9);
  }
  
  // 侧边栏透明化
  .sidebar{
      opacity: 0.9;
  }
  
  // 菜单栏透明化
  .header-inner {
      background: rgba(255, 255, 255, 0.9);
  }
  
  // 搜索透明度
  .popup {
      opacity: 0.9;
  }
  
  // 代码块透明化
  figure.highlight {
      opacity: 0.8;
  }
  
  // 底部红心跳动
  .with-love {
      animation:beat 1.2s infinite;
  }
  
  @keyframes beat{
      30%{transform:scale(1.2);}
      100%{transform:scale(1);}
  }
  
  // 文字选中颜色
  ::selection {
      background: #fc9d9a;
      color: #fff;
  }
  
  .sidebar-nav li:hover {
      color: #fc9d9a;
  }
  
  .sidebar-toc-active .sidebar-nav-toc, .sidebar-overview-active .sidebar-nav-overview {
      border-bottom-color: #fc9d9a;
      color: #fc9d9a;
  }
  
  .sidebar-toc-active .sidebar-nav-toc:hover, .sidebar-overview-active .sidebar-nav-overview:hover {
      color: #fc9d9a;
  }
  
  // 归档页圆点颜色
  .posts-collapse .post-content .post-header:hover {
  border-bottom-color: #fc9d9a;
  }
  
  .posts-collapse .post-content .post-header:hover::before {
  background: #fc9d9a;
  }
  
  // 左上菜单选中文字颜色
  .main-menu .menu-item-active {
      color: #fc9d9a;
  }
  
  .main-menu .menu-item-active::after {
      background: #fff;
  }
  
  // 标题选中下划线颜色
  .posts-expand .post-title-link::before {
      background: #fc9d9a;
  }
  
  .posts-expand .post-title-link:hover::before {
      background: #fc9d9a;
  }
  

• 同样在_config.next.yml中把custom_file_path配置项中的style选项的注释去除，重新编译即可生效