Joe主题实现首页大图

功能说明

{callout color=”#f0ad4e”}
Joe主题首页大图效果
系统版本：typecho 1.2.1 + joe 7.7.1
{/callout}
效果如下图

代码实现

第一步：引入html代码

修改文件：index.php

{tabs}
{tabs-pane label=”修改位置”}

{/tabs-pane}
{tabs-pane label=”代码”}

{hide}

    <!-- 首页大图 -->
    <?php if ($this->options->Home_Big_Img_Status === 'on'): ?>
      <div
        class="HeaderImg"
        style="background: url(<?php echo $this->options->Home_Big_Img() ?>) center;background-size:cover;"
      >
        <div class="infomation">
          <div class="title">
            <?php $this->options->Home_Big_Img_Text_Top(); ?>
          </div>
          <div class="desctitle">
            <span class="motto joe_motto"></span>
          </div>
        </div>
        <section class="HeaderImg_bottom">
          <svg
            class="waves-svg"
            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 44 c 30 0 58 -18 88 -18 s 58 18 88 18 s 58 -18 88 -18 s 58 18 88 18 v 44 h -352 Z"></path>
            </defs>
            <g class="parallax">
              <use xlink:href="#gentle-wave" x="48" y="0"></use>
              <use xlink:href="#gentle-wave" x="48" y="3"></use>
              <use xlink:href="#gentle-wave" x="48" y="5"></use>
              <use xlink:href="#gentle-wave" x="48" y="7"></use>
            </g>
          </svg>
        </section>
      </div>
    <?php endif; ?>

{/hide}

{/tabs-pane}
{/tabs}

第二步：引入css样式

1. 在assets/css下新建文件my.homeimg.css

2. 写入以下css代码

{tabs}
{tabs-pane label=”修改位置”}

{/tabs-pane}
{tabs-pane label=”代码”}

{hide}

.HeaderImg {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    height: calc(75vh);
}
.HeaderImg.minImg {
    max-width: 83rem;
    height: 25rem;
    margin: auto;
}
.HeaderImg.minImg .infomation .desctitle {
    font-size: 1.5rem;
}
.HeaderImg img {
    -o-object-fit: cover;
    object-fit: cover;
}
.HeaderImg .infomation {
    position: absolute;
    line-height: 2;
}
.HeaderImg .infomation .title {
    font-size: 2rem;
    font-weight: 700;
    color: #fff;
    text-align: center;
    text-shadow: 0 0.1875rem 0.3125rem #1c1f21;
    letter-spacing: 0.3rem;
}
.HeaderImg .infomation .desctitle {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #f3f3f3;
    font-size: 1rem;
    padding: 0 1rem;
    text-shadow: 0 0.1875rem 0.3125rem #1c1f21;
}
.HeaderImg .HeaderImg_bottom {
    width: 100%;
    position: absolute;
    left: 0;
    bottom: -5px;
}
.HeaderImg .HeaderImg_bottom .waves-svg {
    width: 100%;
    height: 3rem;
}
.HeaderImg .HeaderImg_bottom .waves-svg .parallax > use {
    -webkit-animation: move-forever 25s cubic-bezier(0.55, 0.5, 0.45, 0.5) infinite;
    animation: move-forever 25s cubic-bezier(0.55, 0.5, 0.45, 0.5) infinite;
}
.HeaderImg .HeaderImg_bottom .waves-svg .parallax > use:first-child {
    -webkit-animation-delay: -2s;
    animation-delay: -2s;
    -webkit-animation-duration: 7s;
    animation-duration: 7s;
    fill: var(--background);
    opacity: 0.9;
}
.HeaderImg .HeaderImg_bottom .waves-svg .parallax > use:nth-child(2) {
    -webkit-animation-delay: -3s;
    animation-delay: -3s;
    -webkit-animation-duration: 10s;
    animation-duration: 10s;
    fill: var(--background);
    opacity: 0.8;
}
.HeaderImg .HeaderImg_bottom .waves-svg .parallax > use:nth-child(3) {
    -webkit-animation-delay: -4s;
    animation-delay: -4s;
    -webkit-animation-duration: 13s;
    animation-duration: 13s;
    fill: var(--background);
    opacity: 0.9;
}
.HeaderImg .HeaderImg_bottom .waves-svg .parallax > use:nth-child(4) {
    -webkit-animation-delay: -5s;
    animation-delay: -5s;
    -webkit-animation-duration: 20s;
    animation-duration: 20s;
    fill: var(--background);
}
@-webkit-keyframes move-forever {
    0% {
        transform: translate3d(-90px, 0, 0);
    }
    to {
        transform: translate3d(85px, 0, 0);
    }
}
@keyframes move-forever {
    0% {
        transform: translate3d(-90px, 0, 0);
    }
    to {
        transform: translate3d(85px, 0, 0);
    }
}
.HeaderImg:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAKUlEQVQImU3IMREAIAgAwJfNkQCEsH8cijjpMf6vnXlQaIiJFx+omEBfmqIEZLe2jzcAAAAASUVORK5CYII=);
}
@media (max-width: 768px) {
    .HeaderImg {
        height: 15rem;
        margin-top: 0;
        height: calc(35vh);
    }
    .HeaderImg.minImg {
        width: 100%;
        height: 15rem;
    }
    .HeaderImg .infomation .title {
        font-size: 1.5rem;
    }
    .HeaderImg .infomation .desctitle {
        font-size: 0.9rem;
    }
    .HeaderImg .HeaderImg_bottom .waves-svg {
        height: 3rem;
    }
}

{/hide}

{/tabs-pane}
{/tabs}

第三步：添加后台配置

{callout color=”#f0ad4e”}
后台配置方便快速修改图片||文字内容
{/callout}

修改文件：functions.php

{tabs}
{tabs-pane label=”修改位置”}

{/tabs-pane}
{tabs-pane label=”代码”}

{hide}

    $Home_Big_Img_Status = new Typecho_Widget_Helper_Form_Element_Select(
      'Home_Big_Img_Status',
      array(
        'off' => '关闭（默认）',
        'on' => '开启',
      ),
      'off',
      '是否开启首页大图',
      '介绍：用于开启或关闭首页大图<br />
       注意：开启后请设置大图图片地址'
    );
    $Home_Big_Img_Status->setAttribute('class', 'joe_content joe_image');
    $form->addInput($Home_Big_Img_Status->multiMode());

    $Home_Big_Img = new Typecho_Widget_Helper_Form_Element_Text(
      'Home_Big_Img',
      NULL,
      'https://wrz521.top/image/1707229778437.jpg',
      '首页大图图片地址',
      '介绍：用于修改首页大图显示的图片 <br/>格式：图片url地址 || 随机图片api'
    );
    $Home_Big_Img->setAttribute('class', 'joe_content joe_image');
    $form->addInput($Home_Big_Img);

    $Home_Big_Img_Text_Top = new Typecho_Widget_Helper_Form_Element_Text(
      'Home_Big_Img_Text_Top',
      NULL,
      '辰漪 & 博客',
      '首页大图中上文字',
      '介绍：用于修改首页大图中间上方的文字 <br/>格式：文字，不支持文字api'
    );
    $Home_Big_Img_Text_Top->setAttribute('class', 'joe_content joe_image');
    $form->addInput($Home_Big_Img_Text_Top);

{/hide}

{/tabs-pane}
{/tabs}

第四步：修改配置，保存，刷新