首页置顶公告栏轮播

发表于 更新于 分类于 阅读次数：
本文字数： 6.5k 阅读时长 ≈ 6 分钟
本文将介绍如何在首页添加置顶公告栏轮播组件

前言

公告提醒就应该醒目，将其设为置顶并添加轮播效果确实为不错的方案。

之前一直想搞，最近看了两篇教程，自己鼓捣了一下。（参考文章附后记）

效果如下：

操作

添加公告页面

  1. 在\themes\butterfly\layout\includes\page目录下新建notice.pug模板：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    .timeline(class="notice")
      if site.data.notice
        each i in site.data.notice
          .timenode
            .meta
              p
              p=i.date
              p
            .body
              p=i.msg

  2. 在\themes\butterfly\scripts\tag目录下新建notice.js文件：

    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
    'use strict';

    function postTimeline(args, content) {
      if (args.length > 0) {
        return `<div class="timeline"><p class='p h2'>${args}</p>${content}</div>`;
      } else {
        return `<div class="timeline">${content}</div>`;
      }
    }

    function postTimenode(args, content) {
      args = args.join(' ').split(',')
      var time = args[0]
      return `<div class="timenode"><div class="meta"><p>${hexo.render.renderSync({text: time, engine: 'markdown'})}</p></div><div class="body">${hexo.render.renderSync({text: content, engine: 'markdown'}).split('\n').join('')}</div></div>`;
    }


    // {% timeline %}
    // ... timenode ...
    // {% endtimeline %}
    hexo.extend.tag.register('timeline', postTimeline, {ends: true});

    // {% timenode time %}
    // what happened
    // {% endtimenode %}
    hexo.extend.tag.register('timenode', postTimenode, {ends: true});

  3. 在\themes\butterfly\source\css\_tags目录下新建notice.styl文件：

    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
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    div
      &.timenode
        position relative
        &:before
          top 0
          height 6px
        &:after
          top 26px
          height calc(100% - 26px)
        &:last-child
          &:after
            height calc(100% - 26px - 16px)
            border-bottom-left-radius 2px
            border-bottom-right-radius 2px
        .meta
          position relative
          color var(--tab-botton-color)
          font-size 0.375rem
          line-height 32px
          height 32px
          &:before
            background rgba(59, 159, 255, 0.5)
            width 16px
            height 16px
            border-radius 8px
          &:after
            background #44d7b6
            margin-left 2px
            margin-top 2px
            width 12px
            height 12px
            border-radius 6px
            transform scale(0.5)
          p
            font-weight bold !important
            margin 0 0 0 24px !important
        .body
          margin 4px 0 10px 24px
          padding 10px
          border-radius 12px
          background #efeded
          display inline-block
          p
            &:first-child
              margin-top 0 !important
            &:last-child
              margin-bottom 0 !important
          .highlight
            background #fff7ea
            filter grayscale(0%)
            figcaption
              background #ffeed2
            .gutter
              background #ffedd0
        &:hover
          .meta
            color #444
            &:before
              background rgba(255, 87, 34, 0.5)
            &:after
              background #ff5722
              transform scale(1)

    div.timenode:before,
    div.timenode:after
      content ""
      z-index 1
      position absolute
      background rgba(59, 159, 255, 0.5)
      width 2px
      left 7px

    div.timenode .meta,
    div.timenode .body
      max-width calc(100% - 24px)

    div.timenode .meta:before,
    div.timenode .meta:after
      content ""
      position absolute
      top 8px
      z-index 2

    [data-theme="dark"]
      div
        &.timenode
          .body
            background #2c2c2c
          &:hover
            .meta
              color #ccd0d7
          .meta
            color rgba(255, 255, 255, 0.6)
        &.timeline
          p
            &.p
              &.h2
                color rgba(255, 255, 255, 0.6)

  4. 在\themes\butterfly\layout\page.pug文件中添加notice.pug模板：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    extends includes/layout.pug

    block content
      #page
        if top_img === false
          h1.page-title= page.title

        case page.type
          when 'tags'
            include includes/page/tags.pug
          when 'link'
            include includes/page/flink.pug
          when 'categories'
            include includes/page/categories.pug
    +     when 'notice'
    +       include includes/page/notice.pug
          default
            include includes/page/default-page.pug

        if page.comments !== false && theme.comments && theme.comments.use
          - var commentsJsLoad = true
          !=partial('includes/third-party/comments/index', {}, {cache: true})

  5. 新建页面

    1
    hexo new page notice
    1
    2
    3
    4
    5
    ---
    title: 公告
    type: "notice"
    comments: false
    ---

  6. 在\source\_data目录下新建notice.yml文件，可以在其中添加公告信息以及时间：

    1
    2
    3
    4
    - date: 2022.10.12
      msg: 公告栏置顶轮播
    - date: 2022.10.8
      msg: 花猪(՞•Ꙫ•՞)在此欢迎您光临小破站

    如此一来，便有了公告页面。

添加首页公告栏轮播组件

  1. 在\themes\butterfly\layout\includes目录下新建notice.pug模板（不同于之前的）：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    #notice.notice(onclick=`window.open('/butterfly/notice/','_self')`)
        i.notice-logo.fas.fa-bullhorn.fa-shake
        span=' '+_p('公告栏')
        #noticeList.swiper-container
            .swiper-wrapper
                if site.data.notice
                    each i in site.data.notice
                        .li-style.swiper-slide=i.msg
        i.notice-enter.fas.fa-arrow-circle-right
    .js-pjax
      script(src='https://unpkg.com/swiper/swiper-bundle.min.js' data-pjax='')
      script.
        var swiper = new Swiper ('#noticeList', {
          spaceBetween: 30,
          centeredSlides: true,
          direction: 'vertical', // 垂直切换选项
          loop: true, // 循环模式选项

          autoplay: {
            delay: 3000,
            disableOnInteraction: false,
          },
        })

    注意：我设置该主题的根路径包含/butterfly/（_config.yml配置如下）

    1
    2
    3
    4
    # URL
    ## If your site is put in a subdirectory, set url as 'http://example.com/child' and root as '/child/'
    url: http://cnhuazhu.top/
    root: /butterfly/

    因此在第一行代码中的URL为/butterfly/notice/。通常情况下仅设置为/notice/就好。

  2. 在\themes\butterfly\layout\index.pug文件中增加notice.pug模板：

    1
    2
    3
    4
    5
    6
    7
    8
    extends includes/layout.pug

    block content
      include ./includes/mixins/post-ui.pug
      #recent-posts.recent-posts
    +   include includes/notice.pug
        +postUI
        include includes/pagination.pug

  3. 在\themes\butterfly\source\css目录下新建notice.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
    .notice-logo {
      line-height: 22px;
      margin-right: 8px;
      transition: 0.3s;
      color: #ff0000;
      font-size: 1.45em
    }
    #notice {
      height: 47px;
      background-color: rgba(0, 0, 0, 0.110);
      color: var(--font-color);
      padding: 10px 20px 10px 20px;
      border-radius: 10px;
      cursor: pointer;
      display: flex;
      overflow: hidden;

    }
    [data-theme="dark"] #notice {
      background: rgba(0, 0, 0, 0.175) !important;
    }
    #notice span {
      white-space: nowrap;
      font-weight: bolder;
    }
    .swiper-wrapper {
      width: 100%;
      height: 25px;
      line-height: 25px;
    }
    .swiper-wrapper .swiper-slide {
      width: 100%;
      text-align: center;
      -webkit-line-clamp: 1;
      -webkit-box-orient: vertical;
      overflow: hidden;
      text-overflow: ellipsis;
      transition: 0.3s;
      font-weight: bold;
    }
    .swiper-slide:hover {
      color: #64b2ff;
    }
    #noticeList {
      margin-left: auto;
      margin-right: auto;
      position: relative;
      overflow: hidden;
      list-style: none;
      padding: 0;
      z-index: 1;
    }
    .notice-enter {
      line-height: 25px;
      margin-left: 8px;
      transition: 0.3s;
    }

    并在_config.butterfly.yml主题文件中的head处添加该文件：

    1
    2
    3
    4
    inject:
      head:
        # 置顶公告栏
        - <link rel="stylesheet" href="/butterfly/css/notice.css">

  4. 重新渲染，部署，即可看到效果。

后记

这个组件折腾了很久，考虑到点击后需要跳转到一个新的页面（其实没有也无妨）。便涉及到页面模板的编写，还是花费了一段时间去研究的。

参考文章：

相关文章