前后效果对比

  • 原装

原装

  • 修改

魔改

修改教程

handsome主题公告相关文件位置:/handsome/index.php

把公告移至header下方

1
这里直接剪切整个公告到header下方即可,如图。
2

编写公告

这里我已经写好了,首先是HTML:

<div class="notice notice-open">
  <div class="notice-header">
    <i class="notice-icon">&#xe85a;</i>
    <div class="notice-title">公告栏</div>
    <i class="notice-icon notice-collapse">keyboard_arrow_down</i>
  </div>
  <ul class="notice-body">
      <?php $this->options->blogNotice(); ?>
  </ul>
</div>

替换掉原来的:
HTML

接着上CSS:

  @font-face {
    font-family: 'Material Icons';
    font-style: normal;
    font-weight: 400;

    src: local('Material Icons'), local('MaterialIcons-Regular'), url(https://cdn.irow.top/mdui/0.4.3/icons/material-icons/MaterialIcons-Regular.woff2) format('woff2'), url(https://cdn.irow.top/mdui/0.4.3/icons/material-icons/MaterialIcons-Regular.woff) format('woff');
  }

  .notice {
    background-color: #fff;
    color: rgba(0, 0, 0, 0.87);
    display: block;
    font-size: 14.5px;
    line-height: 16.675px;
    text-size-adjust: 100%;
    width: 100%;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  }

  .notice-header {
    align-items: center;
    box-sizing: border-box;
    cursor: pointer;
    display: flex;
    height: 48px;
    min-height: 48px;
    overflow-x: hidden;
    overflow-y: hidden;
    padding-bottom: 0px;
    padding-left: 16px;
    padding-right: 16px;
    padding-top: 0px;
    position: relative;
    text-decoration-color: rgba(0, 0, 0, 0.87);
    text-decoration-line: none;
    text-decoration-style: solid;
    transition-delay: 0s;
    transition-duration: 0.3s;
    transition-property: background-color;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    user-select: none;
    -webkit-box-align: center;
  }

  .notice-icon {
    direction: ltr;
    display: block;
    font-family: "Material Icons";
    font-feature-settings: "liga";
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    height: 24px;
    letter-spacing: normal;
    line-height: 24px;
    overflow-wrap: normal;
    text-align: center;
    text-rendering: optimizelegibility;
    text-transform: none;
    vertical-align: middle;
    white-space: nowrap;
    width: 24px;
    -webkit-font-smoothing: antialiased;
  }

  .notice-title {
    box-sizing: content-box;
    display: block;
    flex-grow: 1;
    font-size: 16px;
    font-weight: 400;
    height: 20px;
    line-height: 20px;
    padding-bottom: 14px;
    padding-top: 14px;
    -webkit-box-flex: 1;
  }

  .notice-collapse {
    -webkit-transition: -webkit-transform .3s cubic-bezier(.4, 0, .2, 1);
    transition: -webkit-transform .3s cubic-bezier(.4, 0, .2, 1);
    transition: transform .3s cubic-bezier(.4, 0, .2, 1);
    transition: transform .3s cubic-bezier(.4, 0, .2, 1), -webkit-transform .3s cubic-bezier(.4, 0, .2, 1);
    -webkit-transform: rotate(0);
    transform: rotate(0);
    will-change: transform;
  }

  .notice-body {
    background-color: rgba(0, 0, 0, 0);
    font-size: 13px;
    line-height: 14.95px;
    list-style-image: none;
    list-style-position: outside;
    list-style-type: none;
    margin-block-end: 0px;
    margin-block-start: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
    margin-right: 0px;
    margin-top: 0px;
    overflow-x: hidden;
    overflow-y: hidden;
    padding-bottom: 0px;
    padding-inline-start: 0px;
    padding-left: 0px;
    padding-right: 0px;
    padding-top: 0px;
    transition-delay: 0s;
    transition-duration: 0.3s;
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    will-change: height;
  }

  .notice-body>li {
    min-height: 40px;
    position: relative;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding-right: 16px;
    padding-left: 72px;
    overflow: hidden;
    line-height: 40px;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
  }

  .notice-body>li:before {
    position: absolute;
    right: 0;
    left: 0;
    display: block;
    height: 1px;
    content: ' ';
    background-color: rgba(0, 0, 0, .12);
  }

  .notice-header:hover,
  .notice-body>li:hover {
    background-color: rgba(0, 0, 0, .08);
  }

  .notice-open>.notice-header .notice-collapse {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
  }

CSS随便加到页面里就行,你可以加在外部样式表中,也可以加到外观设置中的自定义CSS里。
完成后效果如下:
css

最后添加JS实现折叠功能:

  $(function() {
    if (!$('.notice').hasClass('notice-open')) {
      $('.notice-body').hide();
    }
    $('.notice-header').click(function() {
      $(this).parent().toggleClass('notice-open');
      $('.notice-body').fadeToggle('fast');
    });
  })

同样只要加到网页中即可,你可以直接加在外观设置自定义JS中。
另外如果你开了pjax的话,这里给出简单解决方案。在pjax回调函数中加入:

if (null != $('.notice')) {
    $('.notice').removeClass('notice-open');
    $('.notice-body').hide();
    $('.notice-header').click(function () {
        $(this).parent().toggleClass('notice-open');
        $('.notice-body').fadeToggle('fast');
    });
}

炫彩透明模式

找到如下路径/usr/themes/handsome/assets/css/features中的coolopacity.min.css文件,在末尾添加:

.notice {
    background-color: rgba(255, 255, 255, .15);
    color: #fff;
}

食用方法

之后公告只要在外观设置的公告里用<li>分条写就行了。例如下面这样:
example

最后修改:2019 年 10 月 03 日 04 : 59 PM
如果觉得我的文章对你有用,请随意赞赏