实现页面背景大图全屏效果

# 前言

主题默认首页等其他页面大图是半屏,个人喜欢图片占据全屏的效果,因此修改源码

# 实现

# 修改 Stylus

  1. 找到 themes\shoka\source\css\_common\outline\header\ 目录,以下修改都是在该目录下修改;

  2. 找到 brand.styl , 在 #brand 中修改 height 值:

    #brand {
      position: fixed;
      padding: 3rem 5rem 0;
      text-align: center;
      width: 100%;
      height: 50vh;   // 修改为 80vh
      min-height: 10rem;

    修改为

    #brand {
      position: fixed;
      padding: 3rem 5rem 0;
      text-align: center;
      width: 100%;
      height: 80vh;
      min-height: 10rem;
  3. 找到 header.styl , 在 #header 中修改 height 值:

    #header {
      margin: 0 auto;
      position: relative;
      width: 100%;
      height: 50vh;  // 修改为 100vh
      text-shadow: 0rem .2rem .3rem alpha(#000, .5);
      color: var(--header-text-color);

    修改为

    #header {
      margin: 0 auto;
      position: relative;
      width: 100%;
      height: 100vh;
      text-shadow: 0rem .2rem .3rem alpha(#000, .5);
      color: var(--header-text-color);
  4. 找到 image.styl , 在 #imgs 中修改 height 值:

    #imgs {
      display: block;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 70vh;  // 修改为 100vh
      min-height: 25rem;
      z-index: -9;
      background-color: #363636;

    修改为

    #imgs {
      display: block;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100vh;
      min-height: 25rem;
      z-index: -9;
      background-color: #363636;
  5. 找到 tool.styl , 在 #tool 中修改 top 值:

    #tool {
      position: fixed;
      if (hexo-config('sidebar.position') == 'left') {
        right: 1rem;
      } else {
        left: 1rem;
      }
      top: 50vh;  // 修改为 90vh
      z-index: $zindex-2;

    修改为

    #tool {
      position: fixed;
      if (hexo-config('sidebar.position') == 'left') {
        right: 1rem;
      } else {
        left: 1rem;
      }
      top: 90vh;
      z-index: $zindex-2;
  6. 找到 waves.styl , 在 #waves 中修改:

    .waves {
      width: 100%;
      height: 15vh;
      margin-bottom: -.6875rem;  // 删除此处
      min-height: 3.125rem;
      max-height: 9.375rem;
      position:relative;  // 修改为 absolute
      // 新增 z-index: 4;
      +mobile() {
        height: 10vh;
      }
    }

    修改为

    .waves {
      width: 100%;
      height: 15vh;
      bottom: 0;
      min-height: 3.125rem;
      max-height: 9.375rem;
      position: absolute;
      z-index: 4;
      +mobile() {
        height: 10vh;
      }
    }

# 修改 nunjucks (layout)

  1. 找到 themes\shoka\layout\_partials\ 目录;

  2. 修改 layout.njk , 修改 </header> 的位置,大概 60 行左右:

    </header>
        <div id="waves">
          <svg class="waves" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto">
            <defs>
              <path id="gentle-wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z" />
            </defs>
            <g class="parallax">
              <use xlink:href="#gentle-wave" x="48" y="0" />
              <use xlink:href="#gentle-wave" x="48" y="3" />
              <use xlink:href="#gentle-wave" x="48" y="5" />
              <use xlink:href="#gentle-wave" x="48" y="7" />
            </g>
          </svg>
        </div>
    <main>

    header 标签移动到 idwavesdiv 下方,即:

    <div id="waves">
            <svg class="waves" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto">
              <defs>
                <path id="gentle-wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z" />
              </defs>
              <g class="parallax">
                <use xlink:href="#gentle-wave" x="48" y="0" />
                <use xlink:href="#gentle-wave" x="48" y="3" />
                <use xlink:href="#gentle-wave" x="48" y="5" />
                <use xlink:href="#gentle-wave" x="48" y="7" />
              </g>
            </svg>
          </div>
          
        </header>
        <main>

完成!

更新于 阅读次数

请我喝[茶]~( ̄▽ ̄)~*

Lavender 微信支付

微信支付

Lavender 支付宝

支付宝