hexo next美化的配置

1. header.styl

themes\hexo-theme-next\source\css_schemes\Mist_header.styl

// Header设置
.header {
    background-size: 1610px 125px;
    padding: 10px 10px 10px 10px;
    background-position:center;
    // 设置主题部分的透明度，具体看图
    opacity: 1;
}
.header-inner {
  align-items: center;
  display: flex;
  padding: 20px 0;

  +mobile() {
    display: block;
    padding: 10px 0;
    width: auto;
  }
}

.site-meta {
  line-height: normal;
  
//设置brand(site网站名的底色），这里用了蓝色渐变背景
  .brand {
    background: linear-gradient(200deg, #2e80a5, #0c0c0b);
    padding: 20px 50px;
    +mobile() {
      display: block;
    }
  }

  .site-title {
    font-weight: bolder;
    color:#FFF;
  }
}


.use-motion {
  .logo-line-before i {
    left: -100%;
  }

  .logo-line-after i {
    right: -100%;
  }
}

.site-subtitle {
  display: none;
}

2.post.styl

themes\hexo-theme-next\source\css_common\components\post\post.styl

// 修改按键（button）样式 ，如点击阅读全文的按钮
.btn {
    color: #E94563;
    background: #fff;
    border: 2px solid #E94563;
    float: left;
    font-size:10px; 
}
// 按键（button）点击时样式
.btn:hover {
  border-color: #E94563;
  color: #fff;
  background: #E94563;
}


.post-body
{
  font-family: $font-family-posts;
  word-wrap();

  +desktop-large() {
    font-size: $font-size-large;
  }

  .exturl .fa {
    font-size: $font-size-small;
    margin-left: 4px;
  }

  .image-caption, .figure .caption {
    color: $grey-dark;
    font-size: $font-size-small;
    font-weight: bold;
    line-height: 1;
    margin: -20px auto 15px;
    text-align: center;
  }
}

.post-sticky-flag {
  display: inline-block;
  transform: rotate(30deg);
}

.post-button {
  margin-top: 40px;
  text-align: center;
}

//next Mist主题下的主页预览分块.post-block设置阴影 ，margin调节文章之间的间距
.use-motion {
  if (hexo-config('motion.transition.post_block')) {
    .post-block{
   opacity: 0;
   margin: 30px 30px 100px 30px;
   padding: 30px 30px 30px 30px;
   -webkit-box-shadow: 0 0 5px rgba(202, 203, 203, .5);
   -moz-box-shadow: 0 0 5px rgba(202, 203, 204, .5);
  } .pagination, .comments {
      opacity: 0;
    }
  }



  if (hexo-config('motion.transition.post_header')) {
    .post-header {
      opacity: 0;
    }
  }

  if (hexo-config('motion.transition.post_body')) {
    .post-body {
      opacity: 0;
    }
  }

  if (hexo-config('motion.transition.coll_header')) {
    .collection-header {
      opacity: 0;
    }
  }
}

@import 'post-collapse';
@import 'post-eof';
@import 'post-expand';
@import 'post-gallery';
@import 'post-header';
@import 'post-nav';
@import 'post-rtl';
@import 'post-tags';
@import 'post-widgets';
@import 'post-reward';

@import 'post-copyright' if (hexo-config('creative_commons.post'));

@import 'post-followme' if (hexo-config('follow_me'));

@import "my-post-copyright"

3.layout.styl

themes\hexo-theme-next\source\css_schemes\Mist_layout.styl

// Tags
// --------------------------------------------------
hr {
  height: 2px;
  margin: 20px 0;
}

// Components
// --------------------------------------------------
.btn {
  padding: 0 10px;
}

.headband {
  display: none;
}

// Page - Container
// --------------------------------------------------

//设置文章站页面的宽度，背景色等 
.main-inner {
 width: 90% 
  background: #fff;
  opacity: 1;
  padding: 2px 10px 2px 10px;
  +mobile() {
    width: auto;
  }
}

// width: 100%表示占上面.main-inner 的全部.main-inner和.content 的width的设置决定文章的大小
.content {
  width: 100% 
  padding-top: 10px;
  
  +mobile() {
    padding-top: 10px;
  }
}

// Pagination
// --------------------------------------------------
.pagination {
  margin: 120px 0 0;
  text-align: left;

  +mobile() {
    margin: 80px 10px 0;
    text-align: center;
  }
}

// Footer
// --------------------------------------------------
.footer {
  background: var(--content-bg-color);
  color: var(--text-color);
  padding: 10px 0;
}

.footer-inner {
  text-align: left;

  +mobile() {
    text-align: center;
    width: auto;
  }
}

//设置背景图
body {
    background:url(/images/lanse.jpg);
    background-size:cover;
    background-repeat:no-repeat;
    background-attachment:fixed;
    background-position:center;
    // 设置主题部分的透明度，具体看图
    opacity: 1;
}

4. 设置header照片随机切换

id="header1" 自定义加上去的 设置整个横幅，最底下有js的脚本，随机切换图片
id="id-header-inner" 自定义加的，设置菜单文字对应的图片 ，比header1的图片小（这里没有写脚本）
C:\Users\xx\Desktop\Project X\hexo_blog\themes\hexo-theme-next\layout_layout.swig

<!DOCTYPE html>
<html lang="{{ config.language }}">
<head>
  {{ partial('_partials/head/head.swig', {}, {cache: theme.cache.enable}) }}
  {% include '_partials/head/head-unique.swig' %}
  {{- next_inject('head') }}
  <title>{% block title %}{% endblock %}</title>
  {{ partial('_third-party/analytics/index.swig', {}, {cache: theme.cache.enable}) }}
  {{ partial('_scripts/noscript.swig', {}, {cache: theme.cache.enable}) }}
</head>

<body itemscope itemtype="http://schema.org/WebPage">
  <div class="container{%- if theme.motion.enable %} use-motion{%- endif %}">
    <div class="headband"></div>


    <header id="header1" class="header" itemscope itemtype="http://schema.org/WPHeader">  
      <div id="id-header-inner" class="header-inner">{% include '_partials/header/index.swig' %}
      
      </div>
    </header>

    {{ partial('_partials/widgets.swig', {}, {cache: theme.cache.enable}) }}

    <main class="main">
      <div class="main-inner">
        <div class="content-wrap">
          {% include '_partials/header/sub-menu.swig' %}
          <div class="content {% block class %}{% endblock %}">
            {% block content %}{% endblock %}
          </div>
          {% include '_partials/comments.swig' %}
        </div>
        {%- if theme.sidebar.display !== 'remove' %}
          {% block sidebar %}{% endblock %}
        {%- endif %}
      </div>
    </main>

    <footer class="footer">
      <div class="footer-inner">
        {% include '_partials/languages.swig' %}
        {{ partial('_partials/footer.swig', {}, {cache: theme.cache.enable}) }}
        {{ partial('_third-party/statistics/index.swig', {}, {cache: theme.cache.enable}) }}
      </div>
    </footer>
  </div>

  {{ partial('_scripts/index.swig', {}, {cache: theme.cache.enable}) }}
  {{ partial('_third-party/index.swig', {}, {cache: theme.cache.enable}) }}

  {%- if theme.pjax %}
    <div id="pjax">
  {%- endif %}
  {% include '_third-party/math/index.swig' %}
  {% include '_third-party/quicklink.swig' %}

  {{- next_inject('bodyEnd') }}
  {%- if theme.pjax %}
    </div>
  {%- endif %}


 <script type="text/javascript">
 //header背景图切换脚本
  var num=Math.round((Math.random() * (10 - 1) + 1) );
  var imgx="url(/images/x"+num+".jpg)";
  document.getElementById("header1").style.backgroundImage = "url(/images/x"+num+".jpg)";
 </script>

</body>
</html>

5. 字体

全局、题目、多级标题、文章、代码的字体设置
themes\hexo-theme-next_config.yml 搜索front

font:
  enable: false

  # Uri of fonts host, e.g. https://fonts.googleapis.com (Default).
  host:

  # Font options:
  # `external: true` will load this font family from `host` above.
  # `family: Times New Roman`. Without any quotes.
  # `size: x.x`. Use `em` as unit. Default: 1 (16px)

  # Global font settings used for all elements inside <body>.
  global:
    external: true
    family: Lato
    size:

  # Font settings for site title (.site-title).
  title:
    external: true
    family:
    size:

  # Font settings for headlines (<h1> to <h6>).
  headings:
    external: true
    family:
    size:

  # Font settings for posts (.post-body).
  posts:
    external: true
    family:

  # Font settings for <code> and code blocks.
  codes:
    external: true
    family:

设置阅读时长，分类页面等的字体大小
themes\hexo-theme-next\source\css_variables\base.styl

$font-size-smallest       = .52em;
$font-size-smaller        = .52em;
$font-size-small          = .52em;