next主题美化总结

¶1、首页轮播图

1. 在/themes/next/layout/_macro/目录下，新建carousel.swig文件。

{% if theme.carousel.enable %}

<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

<style type="text/css">

.glyphicon-chevron-left:before{
    content: "《"
}
.glyphicon-chevron-right:before{
    content: "》"
}

@media (max-width: 767px){
    .rights{
        display: none;
    }
    .carousel{
        width: 100% !important;
        height: 100% !important;
    }
    .slide{
        width: 100% !important;
        height: 100% !important;
    }

}

.carousel{
    width: 100%;
    height: 100%;
    position: relative;
}

.carousel-inner {
  position: relative;
  overflow: hidden;
  width: 100%;
}
.carousel-inner > .item {
  display: none;
  position: relative;
  -webkit-transition: 0.6s ease-in-out left;
  -o-transition: 0.6s ease-in-out left;
  transition: 0.6s ease-in-out left;
}
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
  line-height: 1;
}
@media all and (transform-3d), (-webkit-transform-3d) {
  .carousel-inner > .item {
    -webkit-transition: -webkit-transform 0.6s ease-in-out;
    -moz-transition: -moz-transform 0.6s ease-in-out;
    -o-transition: -o-transform 0.6s ease-in-out;
    transition: transform 0.6s ease-in-out;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-perspective: 1000px;
    -moz-perspective: 1000px;
    perspective: 1000px;
  }
  .carousel-inner > .item.next,
  .carousel-inner > .item.active.right {
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
    left: 0;
  }
  .carousel-inner > .item.prev,
  .carousel-inner > .item.active.left {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
    left: 0;
  }
  .carousel-inner > .item.next.left,
  .carousel-inner > .item.prev.right,
  .carousel-inner > .item.active {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    left: 0;
  }
}
.carousel-inner > .active,
.carousel-inner > .next,
.carousel-inner > .prev {
  display: block;
}
.carousel-inner > .active {
  left: 0;
}
.carousel-inner > .next,
.carousel-inner > .prev {
  position: absolute;
  top: 0;
  width: 100%;
}
.carousel-inner > .next {
  left: 100%;
}
.carousel-inner > .prev {
  left: -100%;
}
.carousel-inner > .next.left,
.carousel-inner > .prev.right {
  left: 0;
}
.carousel-inner > .active.left {
  left: -100%;
}
.carousel-inner > .active.right {
  left: 100%;
}
.carousel-control {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 15%;
  opacity: 0.5;
  filter: alpha(opacity=50);
  font-size: 20px;
  color: #fff;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
  background-color: rgba(0, 0, 0, 0);
}
.carousel-control.left {
  background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.0001) 100%);
  background-image: -o-linear-gradient(left, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.0001) 100%);
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.0001) 100%);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#80000000', endColorstr='#00000000', GradientType=1);
}
.carousel-control.right {
  left: auto;
  right: 0;
  background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.0001) 0%, rgba(0, 0, 0, 0.5) 100%);
  background-image: -o-linear-gradient(left, rgba(0, 0, 0, 0.0001) 0%, rgba(0, 0, 0, 0.5) 100%);
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0.0001) 0%, rgba(0, 0, 0, 0.5) 100%);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#80000000', GradientType=1);
}
.carousel-control:hover,
.carousel-control:focus {
  outline: 0;
  color: #fff;
  text-decoration: none;
  opacity: 0.9;
  filter: alpha(opacity=90);
}
.carousel-control .icon-prev,
.carousel-control .icon-next,
.carousel-control .glyphicon-chevron-left,
.carousel-control .glyphicon-chevron-right {
  position: absolute;
  top: 50%;
  margin-top: -10px;
  z-index: 5;
  display: inline-block;
}
.carousel-control .icon-prev,
.carousel-control .glyphicon-chevron-left {
  left: 50%;
  margin-left: -10px;
}
.carousel-control .icon-next,
.carousel-control .glyphicon-chevron-right {
  right: 50%;
  margin-right: -10px;
}
.carousel-control .icon-prev,
.carousel-control .icon-next {
  width: 20px;
  height: 20px;
  line-height: 1;
  font-family: serif;
}
.carousel-control .icon-prev:before {
  content: '\2039';
}
.carousel-control .icon-next:before {
  content: '\203a';
}
.carousel-indicators {
  position: absolute;
  bottom: 10px;
  left: 50%;
  z-index: 15;
  width: 60%;
  margin-left: -30%;
  padding-left: 0;
  list-style: none;
  text-align: center;
}
.carousel-indicators li {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin: 1px;
  text-indent: -999px;
  border: 1px solid #fff;
  border-radius: 10px;
  cursor: pointer;
  background-color: #000 \9;
  background-color: rgba(0, 0, 0, 0);
}
.carousel-indicators .active {
  margin: 0;
  width: 12px;
  height: 12px;
  background-color: #fff;
}
.carousel-caption {
  position: absolute;
  left: 15%;
  right: 15%;
  bottom: 20px;
  z-index: 10;
  padding-top: 20px;
  padding-bottom: 20px;
  color: #fff;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}
.carousel-caption .btn {
  text-shadow: none;
}
@media screen and (min-width: 768px) {
  .carousel-control .glyphicon-chevron-left,
  .carousel-control .glyphicon-chevron-right,
  .carousel-control .icon-prev,
  .carousel-control .icon-next {
    width: 30px;
    height: 30px;
    margin-top: -10px;
    font-size: 30px;
  }
  .carousel-control .glyphicon-chevron-left,
  .carousel-control .icon-prev {
    margin-left: -10px;
  }
  .carousel-control .glyphicon-chevron-right,
  .carousel-control .icon-next {
    margin-right: -10px;
  }
  .carousel-caption {
    left: 20%;
    right: 20%;
    padding-bottom: 30px;
  }
  .carousel-indicators {
    bottom: 20px;
  }
}
</style>
<div width="100%" height="320px" style="border: 0px; overflow: hidden; border-radius: 10px;" scrolling="no">

    <div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="3500" >
        <!-- 轮播（Carousel）指标 -->
        <ol class="carousel-indicators">
        {% set index = 0 %}
        {% for item in theme.carousel.item %}

            <li data-target="#myCarousel" data-slide-to="{{index}}"></li>
            {% set index = index+1 %}

        {% endfor %}
        </ol>
        <!-- 轮播（Carousel）项目 -->
        <div class="carousel-inner" style="height: 280px; border-radius: 10px; width: 100%;">

        {% set act = 0 %}
         {% for item in theme.carousel.item %}

            {% if act===0 %}
                <a class="item active" href="{{ url_for(item.link) }}" target="_blank" style="height: 100%;">
                    <img src="{{item.img}}"   style="width: 100%; height: 100%" >
                </a>
                {% set act = 1 %}
                {% elseif act===1 %}
                    <a class="item" href="{{ url_for(item.link) }}" target="_blank" style="height: 100%;">
                        <img src="{{item.img}}"  style="width: 100%; height: 100%;" >
                    </a>
            {% endif %}

        {% endfor %}


        </div>
        <!-- 轮播（Carousel）导航 -->
        <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>

        </a>
        <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>

        </a>
    </div>

</div>

{% endif %}

然后在/thems/next/layout/index.swig中位于{% block content %}下面插入如下内容：

<!--轮播图-->
{% include '\_macro/carousel.swig' %}

2. 主题配置文件末尾添加如下内容：

#Home carousel map, from means link, img means picture
carousel:
  enable: true
  item: [
    {
      'link': '文章链接地址',
      'img': '图片链接地址'
    },
    {
      'link': '文章链接地址',
      'img': '图片链接地址'
    }
  ]

3. 问题处理

   如果遇到问题，在/themes/next/source/js/src/util.js的wrapImageWithFancyBox方法中第八行添加以下代码：

   if($this).hasClass('nofancybox') return;

   然后在carousel.swig中，为img标签加上：

   class="nofancybox"

   点击轮播图左右导航按钮时，a标签的href会锚点到myCarousel处，引起页面滚动。可将href属性改为data-target：

   <a class="left carousel-control" data-target="#myCarousel" href="javascript:void(0);" role="button" data-slide="prev">

¶2、将博客四周改为圆角

在Gemini.style文件中将内容改为：

$border-radius-inner     = 15px 15px 15px 15px;
$border-radius           = 15px;

3、文章底部标签样式设置

1. 修改Blog\themes\next\layout\_macro\post.swig中文件，command+f搜索rel="tag">#，将#替换成<i class="fa fa-tag"></i>。

2. 在/themes/next/layout/目录下，新增tag-color.swig文件，如下：

<script type="text/javascript">
     var alltags = document.getElementsByClassName('tag-cloud-tags');
     var tags = alltags[0].getElementsByTagName('a');
     for (var i = tags.length - 1; i >= 0; i--) {
       var r=Math.floor(Math.random()*75+130);
       var g=Math.floor(Math.random()*75+100);
       var b=Math.floor(Math.random()*75+80);
       tags[i].style.background = "rgb("+r+","+g+","+b+")";
     }
</script>

<style>
  .tag-cloud-tags{
    /*font-family: Helvetica, Tahoma, Arial;*/
    /*font-weight: 100;*/
    text-align: center;
    counter-reset: tags;
  }
  .tag-cloud-tags a{
    border-radius: 6px;
    padding-right: 5px;
    padding-left: 5px;
    margin: 8px 5px 0px 0px;
  }
  .tag-cloud-tags a:before{
    content: "🔖";
  }

  .tag-cloud-tags a:hover{
     box-shadow: 0px 5px 15px 0px rgba(0,0,0,.4);
     transform: scale(1.1);
     /*box-shadow: 10px 10px 15px 2px rgba(0,0,0,.12), 0 0 6px 0 rgba(104, 104, 105, 0.1);*/
     transition-duration: 0.15s;
  }
</style>

在同级目录的page.swig中引入tag-color.swig

{% include 'tag-color.swig' %}

在博客根目录的下新建styles.styl文件

source/_data/styles.styl

内容如下：

/*文章底部标签样式*/
.posts-expand .post-tags a {
  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .24);
  -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .24);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .24);
  font-family: 'Comic Sans MS', sans-serif;
  transition: .2s ease-out;
  padding: 3px 5px;
  margin: 5px;
  background: #f5f5f5;
  border-bottom: none;
  border-radius: 15px;

  +mobile(){
    padding: 1px 3px;
    font-size: 8px;
  }

  &:hover {
    background: rgba(100,154,182,0.902);
    color: #fff;
    -webkit-box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
    -moz-box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
  }
}

然后在主题配置文件中，建custom_file_path.style注释去掉。

¶3、SEO

1. 安装依赖

npm install hexo-generator-sitemap --save
npm install hexo-generator-baidu-sitemap --save
npm install hexo-baidu-url-submit --save

2. 修改站点配置文件

# 通用站点地图
sitemap:
  path: sitemap.xml

    
# 百度站点地图
baidusitemap:
path: baidusitemap.xml
  
# 百度主动推送
baidu_url_submit:
  count: 5
  token: yXO0H?????
  xz_count: 5 				     ## 提交最新的1个链接
  host: https://jinribang.gitee.io 	     ## 百度站长平台中注册的域名
  xz_token: yXO0HC??????	 ## 准入秘钥
  path: baidu_urls.txt 		 ## 文本文档的地址， 新链接会保存在此文本文档里

3. 修改主题配置文件

      # Disable Baidu transformation on mobile devices.
      disable_baidu_transformation: true
      
      # If true, site-subtitle will be added to index page.
      # Remember to set up your site-subtitle in Hexo `_config.yml` (e.g. subtitle: Subtitle)
      index_with_subtitle: true
      
      # Automatically add external URL with Base64 encrypt & decrypt.
      exturl: true
      
      # Google Webmaster tools verification.
      google_site_verification:
      
      # Baidu Webmaster tools verification.
      baidu_site_verification:
      
      # Enable baidu push so that the blog will push the url to baidu automatically which is very helpful for SEO.
      baidu_push: true
      
      # Baidu Analytics
   baidu_analytics: 1a9db4106ec60d3f0???

¶4、配置懒加载

1、修改站点配置文件

lazyload:
  enable: true
  onlypost: true
  loadingImg: /images/loading.png

2、修改主题配置文件

# Vanilla JavaScript plugin for lazyloading images.
# For more information: https://github.com/ApoorvSaxena/lozad.js
lazyload: true

3、安装依赖

npm install hexo-lazyload --save

npm install hexo-lazyload-image --save

git clone https://github.com/theme-next/theme-next-jquery-lazyload source/lib/jquery_lazyload

¶5、站内搜索

安装依赖

npm install hexo-generator-searchdb --save

修改主题配置文件

# Local Search
# Dependencies: https://github.com/theme-next/hexo-generator-searchdb
local_search:
  enable: true
  # If auto, trigger search by changing input.
  # If manual, trigger search by pressing enter key or search button.
  trigger: auto
  # Show top n results per article, show all results by setting to -1
  top_n_per_article: 1
  # Unescape html strings to the readable one.
  unescape: false
  # Preload the search data when the page loads.
  preload: false

¶6、添加公式编辑功能

安装依赖

npm un hexo-renderer-marked --save
npm i hexo-renderer-markdown-it-plus --save

修改主题配置文件

# hexo-renderer-markdown-it-plus (or hexo-renderer-markdown-it with markdown-it-katex plugin) required for full Katex support.
katex:
  enable: true
  # See: https://github.com/KaTeX/KaTeX/tree/master/contrib/copy-tex
  copy_tex: false

¶7、文章永久链接

安装依赖

npm install hexo-abbrlink --save

修改站点配置文件

url: https://tding.top/
root: /
permalink: archives/:abbrlink.html
abbrlink:
  alg: crc32  # 算法：crc16(default) and crc32
  rep: hex    # 进制：dec(default) and hex
permalink_defaults:

¶8、推荐文章

安装依赖

npm install hexo-related-popular-posts --save

修改主题配置文件

# Related popular posts
# Dependencies: https://github.com/tea3/hexo-related-popular-posts
related_posts:
  enable: true
  title: 推荐文章 # Custom header, leave empty to use the default one
  display_in_home: false
  params:
    maxCount: 5
    PPMixingRate: 0.25
    isDate: false
    isImage: false
    isExcerpt: false

¶9、字数和阅读时间统计

安装依赖

npm install hexo-symbols-count-time --save

修改站点配置文件

# 字数和阅读时间统计  
symbols_count_time:
  total_symbols: true
  time: true
  symbols: true
  total_time: true
  awl: 2//2个字符为一个字
  wpm: 160//每分钟阅读的数

修改主题配置文件

# Post wordcount display settings
# Dependencies: https://github.com/theme-next/hexo-symbols-count-time
symbols_count_time:
  separated_meta: true
  item_text_post: true
  item_text_total: ture

¶10、文章置顶

安装依赖

npm uninstall hexo-generator-index --save
npm install hexo-generator-index-pin-top --save

设置置顶图标

打开 /themes/next/layout/_macro/ 目录下的 post.swig 文件，在 的第一个 标签下，插入如下代码：

{% if post.top %}
    <i class="fa fa-thumb-tack"></i>
    <font color=7D26CD>置顶</font>
    <span class="post-meta-divider">|</span>
{% endif %}

¶11、文章加密

安装依赖

npm install hexo-blog-encrypt --save

使用

---
title: 射频微波基础知识（二）
declare: true
toc: true
tags:
  - 射频电路
categories:
  - RF
  - 射频电路
mathjax: true
+password: 
+abstract: 有东西被加密了，请输入密码查看
+message: 请输入密码
---

¶11、减少出站链接

npm install hexo-filter-nofollow --save

修改站点配置文件

# 外部链接优化
nofollow:
  enable: true
  field: site
  exclude:
    - 'baidu.com'
    - 'google.com'

¶12、修改文章返回按钮

npm install hexo-cake-moon-menu --save

修改站点配置文件

moon_menu:
  back2top:
    enable: true
    icon: fa fa-chevron-up
    func: back2top
    order: -1
  back2bottom:
    enable: true
    icon: fa fa-chevron-down
    func: back2bottom
    order: -2

修改主题配置文件

back2top:
  enable: true
  # Back to top in sidebar.
  sidebar: ture
  # Scroll percent label in b2t button.
  scrollpercent: false

¶13、文章阅读次数统计

# Show Views / Visitors of the website / page with busuanzi.
# Get more information on http://ibruce.info/2015/04/04/busuanzi
busuanzi_count:
  enable: true
  total_visitors: false
  total_visitors_icon: fa fa-user
  total_views: false
  total_views_icon: fa fa-user
  post_views: true
  post_views_icon: fa fa-eye

¶14、文章末尾添加结束标识

• 在路径Blog\themes\next\layout\_macro文件夹中新建passage-end-tag.swig文件。

//切换到路径_macro
cd [_macro路径]

//创建passage-end-tag.swig文件
touch passage-end-tag.swig

在passage-end-tag.swig添加以下内容，直接用文本编辑器打开，粘贴以下内容后保存

<div>
    {% if not is_index %}
        <div style="text-align:center;color: #ccc;font-size:14px;">-------------本文结束<i class="fa fa-paw"></i>感谢您的阅读-------------</div>
    {% endif %}
</div>

打开Blog\themes\next\layout\_macro\post.swig，在post-body之后，post-footer之前（post-footer之前两个DIV），添加以下代码：

<div>
  {% if not is_index %}
    {% include 'passage-end-tag.swig' %}
  {% endif %}
</div>

修改主题配置文件

# 文章末尾添加“本文结束”标记
passage_end_tag:
  enabled: true

¶15、网站图标

主题配置文件

favicon:
  small: /images/db3.png
  medium: /images/db3.png
  apple_touch_icon: /images/db3.png

¶16、首页文章折叠

主题配置文件

# Automatically excerpt description in homepage as preamble text.
excerpt_description: false

scroll_to_more: false      # 点击阅读全文后是否跳到<!--more-->标记处,设为false时点击阅读全文可以从头阅读

save_scroll: false        # 自动保存每篇文章或页面上一次滚动的地方

auto_excerpt:   # 是否自动截取摘要
  enable: true # 设置为true则自动截取150字当做首页摘要
  length: 50   # 自动截取的字数

¶17、社交链接

主题配置文件

# Social Links
# Usage: `Key: permalink || icon`
# Key is the link label showing to end users.
# Value before `||` delimiter is the target permalink, value after `||` delimiter is the name of Font Awesome icon.
social:
  #GitHub: https://github.com/yourname || github
  E-Mail: mailto:bigdatayun@gmail.com || envelope
  #Weibo: https://weibo.com/yourname || weibo
  #Google: https://plus.google.com/bigdatayun || google
  Twitter: https://twitter.com/WtKirin || twitter
  
social_icons:
  enable: true
  icons_only: false
  transition: false

¶18、友情链接

主题配置文件

links:
  博客: https://jinribang.gitee.io

¶19、首页目录展示

主题配置文件

# Table of Contents in the Sidebar
# Front-matter variable (unsupport wrap expand_all).
toc:
  enable: true
  # Automatically add list number to toc.
  number: true
  # If true, all words will placed on next lines if header width longer then sidebar width.
  wrap: true
  # If true, all level of TOC in a post will be displayed, rather than the activated part of it.
  expand_all: false
  # Maximum heading depth of generated toc.
  max_depth: 6

¶20、动态背景

# canvas-nest  鼠标静止不动，会有线条聚集
git clone https://github.com/theme-next/theme-next-canvas-nest Hexo/themes/next/source/lib/canvas-next

# three_waves  波浪
# canvas_lines
# canvas_sphere
git clone https://github.com/theme-next/theme-next-three Hexo/themes/next/source/lib/next-three

# canvas-ribbon  彩虹效果，只支持Pisces
git clone https://github.com/theme-next/theme-next-canvas-ribbon Hexo/themes/next/source/lib/canvas-ribbon

canvas_nest:
  enable: true
  onmobile: true # display on mobile or not
  color: "0,0,255" # RGB values, use ',' to separate
  opacity: 0.5 # the opacity of line: 0~1
  zIndex: -1 # z-index property of the background
  count: 99 # the number of lines

主题配置文件

# JavaScript 3D library.
# Dependencies: https://github.com/theme-next/theme-next-three
three:
  enable: false
  three_waves: false
  canvas_lines: false
  canvas_sphere: false

# Canvas-ribbon
# Dependencies: https://github.com/theme-next/theme-next-canvas-ribbon
# For more information: https://github.com/zproo/canvas-ribbon
canvas_ribbon:
  enable: true
  size: 300 # The width of the ribbon
  alpha: 0.6 # The transparency of the ribbon
  zIndex: -1 # The display level of the ribbon

¶21、站点右侧github猫展示

# `Follow me on GitHub` banner in the top-right corner.
github_banner:
  enable: true
  permalink: https://github.com/MrDanielWT
  title: Follow me on GitHub

¶22、文章底部其他发布渠道

# Subscribe through Telegram Channel, Twitter, etc.
# Usage: `Key: permalink || icon` (Font Awesome)
follow_me:
  Twitter: https://twitter.com/WtKirin || twitter
  #Telegram: https://t.me/channel_name || telegram
  WeChat: /images/wechat_channel.jpg || wechat

¶23、评论

# Valine
# For more information: https://valine.js.org, https://github.com/xCss/Valine

valine:
  enable: true
  appid: vUXcw5nU7gmqY??? # Your leancloud application appid
  appkey: gqDJntl51???? # Your leancloud application appkey
  notify: false # Mail notifier
  verify: false # Verification code
  placeholder: 说说你的看法....... # Comment box placeholder
  avatar: mm # Gravatar style
  guest_info: nick,mail,link # Custom comment header
  pageSize: 10 # Pagination size
  language: zh-cn # Language, available values: en, zh-cn
  visitor: false # Article reading statistic
  comment_count: false # If false, comment count will only be displayed in post page, not in home page
  recordIP: true # Whether to record the commenter IP
  serverURLs: # When the custom domain name is enabled, fill it in here (it will be detected automatically by default, no need to fill in)
  #post_meta_order: 0

¶24、文章距顶部距离调整

修改themes/next/source/css/_schemes/Gemini/index.styl内容

.post-block {
  background: var(--content-bg-color);
  border-radius: $border-radius-inner;
  box-shadow: $box-shadow-inner;
  padding: $content-desktop-padding;
  margin-top: 6px;//距离

¶25、修改站点左上角背景颜色

themes/next/source/css/_schemes/Pisces/_head.styl

.site-brand-container {
  background: $black-deep;//修改为你想要的颜色