why do this？
- 希望封面更加抓人眼球
- 仅凭标题和一张图片无法即概括内容，又点明重点。
- 不想花费太多的时间在ps上
改造思路
1. front-matter
既然封面的上的内容与文章内容相关，那就应该遵循文章书写工作流，而不涉及代码。
在文章模板中先添加两个front-matter元素：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| ---
title: <%tp.file.title%>
date: <%tp.date.now("YYYY-MM-DD HH:ss")%>
categories: <%tp.file.folder()%>
unique_url: <%tp.user.getUniqueUrl()%>
copy_url: https://world.ocer.cc/<%tp.user.getUniqueUrl()%>
cover:
top_img:
tags:
updated:
keywords:
swiper_index: 5
top_group_index: 5
ai: "true"
main_color:
cover_title: 封面关键字
cover_icons: 封面icons，支持多个。
---
|
2. 兼容
原本的样式应该不受影响，保留单一封面图展示的样式。
当我们添加了封面关键字或者icons时才适配新样式。
3. 样式
比如我们要写：如何搭建一个图床？
我们的标题可以是：使用chevereto搭建属于自己的图床。
“图床”这个词，则可以作为关键字。
这里的chevereto是我们要使用的服务，那么就可以使用它的图标作为封面icon。
所以，一个或多个icon，一个短词就是我们要新增的样式元素。
如果是一个icon，可以大一些，因为它是主角。而多个icon，它们可以是协作或者对抗的关系，稍微小一点，即照顾不大的封面，又可以平均他们的分量。
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
| // post-ui.pug
mixin postUI(posts)
each article , index in page.posts.data
- let link = article.link || article.path
div(class = (index === 0 ? 'recent-post-item lastestpost-item' : 'recent-post-item') onclick=`pjax.loadUrl('${url_for(link)}')`)
-
let title = article.title || _p('no_title')
const position = theme.cover.position
let leftOrRight = position === 'both'
? index%2 == 0 ? 'left' : 'right'
: position === 'left' ? 'left' : 'right'
let post_cover = article.cover
let no_cover = article.cover === false || !theme.cover.index_enable ? 'no-cover' : ''
let cover_blur = (article.cover_title || article.cover_icons) ? ' cover_blur' : '' // 判断是否启用新样式
let coverClassNames = leftOrRight + cover_blur; // 添加新样式
const singleIcon = typeof(article.cover_icons) === 'string' // 判断是否为单一封面icon
const iconClassName = singleIcon ? 'post_cover_single_icon' : 'post_cover_icon' // 添加不同样式
- const new_post = is_current('/') && (maxDate === article.date)
if post_cover && theme.cover.index_enable
.post_on_cover // 在封面外包一层作为父元素协调子元素位置
.post_cover_items // 封面元素整体居中用
.post_cover_icons // 封面icons
if (article.cover_icons)
each item, index in singleIcon ? [article.cover_icons] : article.cover_icons
img(class=iconClassName src=url_for(item))
if(article.cover_title) // 封面标题
.post_cover_title= article.cover_title
.post_cover(class=coverClassNames)
a(href=url_for(link) title=title style='display: flex;height: 100%;')
img.post_bg(src=url_for(post_cover) onerror=`this.onerror=null;this.src='`+ url_for(theme.error_img.post_page) + `'` alt=title style='pointer-events: none')
|
对应的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
|
.post_on_cover {
position relative;
height: 200px;
}
.post_cover_items{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index:5
.post_cover_icons{
display: flex;
justify-content: center;
gap: 20px;
.post_cover_icon{
width: 60px;
height: 60px;
border-radius: 10px;
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
}
.post_cover_single_icon{
width: 70px;
height: 70px;
border-radius: 10px;
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
}
}
.post_cover_title{
color: white
font-size: 40px;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
line-height: 50px;
}
}
|
搞定！
效果图
