页脚添加公益广告

  1. 修改themes\anzhiyu\layout\includes\footer.pug，替换第16行到29行代码。注意缩进。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
#anzhiyu-footer
  if theme.footer.list.randomFriends > 0
    .footer-group
      .footer-title-group
        .footer-title 友链
        a.random-friends-btn#footer-random-friends-btn(href="javascript:addFriendLinksInFooter();" title="换一批友情链接")
          i.anzhiyufont.anzhiyu-icon-arrow-rotate-right
      .footer-links#friend-links-in-footer
  each item, index in projectList
    .footer-group
      .footer-title=item.title
      .footer-links
        each iten, indey in item.links
          a.footer-item(title=iten.title target="_blank" href=iten.link)=iten.title
    //- 文本二
  .t-t-l(style='width: 25%;display: flex;align-items:center;justify-content: center;width: calc(15% - 10px); text-align:center;flex-direction: column;')
    p.ft-t.t-l-t 公益广告🧬
    .bg-ad
      div
        | 国家反诈中心是国务院打击治理电信网络新型违法犯罪工作部际联席会议合成作战平台，集资源整合、情报研判、侦查指挥为一体，在打击、防范、治理电信网络诈骗等新型违法犯罪中发挥着重要作用。
      .btn-xz-box
        a.btn-xz(href='https://www.hack-gov.com.cn/posts/21480.html') 下载（国家反诈中心） APP

  • 为避免小白因为缩进导致程序报错，我这里给出完整的文件代码。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    #footer-wrap
      if theme.footer.socialBar.enable
        - let centerImg = theme.footer.socialBar.centerImg ? theme.footer.socialBar.centerImg : theme.avatar.img
        - let leftInfo = theme.footer.socialBar.left
        - let rightInfo = theme.footer.socialBar.right
        #footer_deal
          each item, index in leftInfo
            a.deal_link(href=url_for(item.link) title=item.title)
              i(class=item.icon)
          img.footer_mini_logo(title="返回顶部", onclick="anzhiyu.scrollToDest(0, 500)", src=centerImg, size="50px")
          each item, index in rightInfo
            a.deal_link(href=url_for(item.link) title=item.title)
              i(class=item.icon)
      if theme.footer.list.enable
        - let projectList = theme.footer.list.project
        #anzhiyu-footer
          if theme.footer.list.randomFriends > 0
            .footer-group
              .footer-title-group
                .footer-title 友链
                a.random-friends-btn#footer-random-friends-btn(href="javascript:addFriendLinksInFooter();" title="换一批友情链接")
                  i.anzhiyufont.anzhiyu-icon-arrow-rotate-right
              .footer-links#friend-links-in-footer
          each item, index in projectList
            .footer-group
              .footer-title=item.title
              .footer-links
                each iten, indey in item.links
                  a.footer-item(title=iten.title target="_blank" href=iten.link)=iten.title
            //- 文本二
          .t-t-l(style='width: 25%;display: flex;align-items:center;justify-content: center;width: calc(15% - 10px); text-align:center;flex-direction: column;')
            p.ft-t.t-l-t 公益广告🧬
            .bg-ad
              div
                | 国家反诈中心是国务院打击治理电信网络新型违法犯罪工作部际联席会议合成作战平台，集资源整合、情报研判、侦查指挥为一体，在打击、防范、治理电信网络诈骗等新型违法犯罪中发挥着重要作用。
              .btn-xz-box
                a.btn-xz(href='https://www.hack-gov.com.cn/posts/21480.html') 下载（国家反诈中心） APP
      if theme.footer.owner.enable
        - var now = new Date()
        - var nowYear = now.getFullYear()
        if theme.footer.owner.since && theme.footer.owner.since != nowYear
          .copyright!= `©${theme.footer.owner.since} - ${nowYear} By ${config.author}`
        else
          .copyright!= `©${nowYear} By ${config.author}`

      - let work_img = theme.footer.runtime.work_img
      - let work_description = theme.footer.runtime.work_description
      if theme.footer.runtime.enable
        #workboard
          img(src=`${work_img}`, alt=`${work_description}`, title=`${work_description}`, class="workSituationImg boardsign")
          #runtimeTextTip
      if theme.footer.bdageitem
        p#ghbdages
          each item in theme.footer.bdageitem
            a.github-badge(target='_blank' href=item.link style='margin-inline:5px' data-title=item.message title=item.message)
              img(src=item.shields alt=item.message)
      if theme.footer.custom_text
        .footer_custom_text!=`${theme.footer.custom_text}`

  1. 在source\css文件下新建footers.css文件。填写以下代码：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    /* 文本二 */
    .t-t-l {
        flex: 0.5;
        margin-right: 10px;
        margin-right: -44px;
        transform: translateY(-11px);
      }
      
      .t-t-l .bg-ad {
        /* width: 85%; */
        border-radius: 10px;
        padding: 0 10px;
      }
      [data-theme="dark"] .btn-xz {
        display: block;
        background-color: #737171;
        color: var(--btn-color);
        text-align: center;
        line-height: 2.4;
        margin: 8px 0;
      }
      .btn-xz-box {
        margin-top: 10px;
      }
      [data-theme="dark"] .t-t-l .bg-ad  {
        color: #f7f7fa;
      }

      [data-theme="dark"]  .ft-t {
        color: #a0a3b8;
      }
      .btn-xz {
        display: block;
        background-color: var(--btn-bg);
        color: var(--btn-color);
        text-align: center;
        line-height: 2.4;
        margin: 8px 0;
        border-radius: 30px;
      }
      
      .btn-xz:hover {
        text-decoration: none !important;
        background: linear-gradient(to right, #22c1c3, #fdbb2d);
      }
      
      .ft-t {
        font-size: 1.1rem;
        margin-bottom: 20px;
        line-height: 1;
        font-weight: 600;
        color: #8a8a8e;
      }
      
      @media screen and (max-width: 768px) {
      
        .t-t-l .bg-ad {
            width: 100%;
        }
      
        #post-info .post-title {
            font-size: 1.5em;
            z-index: 4;
        }
      
      }
      @media screen and (max-width: 576px){
      
        .t-t-l {
            flex-basis: 100% !important;
            margin-left: 0px !important;
      }
      }
    1. 引入新建的footers.css文件。找到主题的配置文件_config.anzhiyu.yml，找到inject，引入刚刚的css文件。
    1
    2
    3
    4
    5
    6
    7
    8
    9
    inject:
      head:
        # 页脚公益广告css
        - <link rel="stylesheet" href="https://cdn.luomengguo.top/css/footers.css">
       # 樱花飘落效果
       #- <script async src="https://npm.elemecdn.com/tzy-blog/lib/js/other/sakura.js"></script>
      bottom:
        # 自定义js
        # - <script src="/js/xxx"></script>