首页置顶公告栏轮播
前言
公告提醒就应该醒目，将其设为置顶并添加轮播效果确实为不错的方案。
之前一直想搞，最近看了两篇教程，自己鼓捣了一下。（参考文章附后记）
效果如下：
操作
添加公告页面
在\themes\butterfly\layout\includes\page目录下新建notice.pug模板：
.timeline(class="notice")
if site.data.notice
each i in site.data.notice
.timenode
.meta
p
p=i.date
p
.body
p=i.msg在\themes\butterfly\scripts\tag目录下新建notice.js文件：
'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});在\themes\butterfly\source\css\_tags目录下新建notice.styl文件：
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)在\themes\butterfly\layout\page.pug文件中添加notice.pug模板：
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})新建页面
hexo new page notice---
title: 公告
type: "notice"
comments: false
---在\source\_data目录下新建notice.yml文件，可以在其中添加公告信息以及时间：
- date: 2022.10.12
msg: 公告栏置顶轮播
- date: 2022.10.8
msg: 花猪(՞•Ꙫ•՞)在此欢迎您光临小破站如此一来，便有了公告页面。
添加首页公告栏轮播组件
在\themes\butterfly\layout\includes目录下新建notice.pug模板（不同于之前的）：
#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配置如下）
# 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/就好。
在\themes\butterfly\layout\index.pug文件中增加notice.pug模板：
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在\themes\butterfly\source\css目录下新建notice.css文件：
.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);
margin-top: 20px;
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处添加该文件：
inject:
head:
# 置顶公告栏
- <link rel="stylesheet" href="/butterfly/css/notice.css">重新渲染，部署，即可看到效果。
后记
这个组件折腾了很久，考虑到点击后需要跳转到一个新的页面（其实没有也无妨）。便涉及到页面模板的编写，还是花费了一段时间去研究的。
参考文章：
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2022-10-12，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录