cards主题是真简洁，但还是想整点不一样的
首页添加横幅图片
设置图片样式
找到 主题 目录下的\source\css\style_functions\cover.styl，新建cover_banner.styl，添加下列样式代码：
文件地址：\themes\cards\source\css\style\_functions\cover_banner.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
| .cover
display: block;
text-align: center;
margin: 3rem auto;
margin-top: 0rem;
padding: 10rem 0;
background-size: 100% auto;
background-repeat: no-repeat;
background-position: 50% 50%;
/* background-image: /url */
/* 可以直接添加```background-image```属性来添加背景图片 */
opacity: 85%;
box-shadow: 1px 1px 5px 0 rgba(0,0,0,0.02), 1px 1px 15px 0 rgba(0,0,0,0.03)
.cover__logo
max-width $max_width_logo
margin-left auto
margin-right auto
.cover__avatar
border-radius 50%
width $avatar_width
height $avatar_height
/* 上边 | 右边 | 下边 | 左边 */
margin 0 auto 1rem auto
.cover__intro
color: #999
.cover__title
color: #999
|
修改config文件
为了修改方便，将背景图片的设置方式移到 主题 的_config.yml文件中，
在_config.yml文件中的cover项中，添加一个banner属性，在其中输入图片地址。
文件地址：\themes\cards\_config.yml
1
2
3
4
5
6
7
8
9
10
11
12
13
| # 封面 cover 设置
cover:
# 首页的横幅图片，输入图片地址
banner: /url/banner.jpg /* 图片存放地址 */
# 显示在最上方 cover 处的站点名称
sitename: Armand Rozin
# 若 avatar 配置不为空，则优先使用 avatar 覆盖 sitename
avatar: /url/avatar.png
# sitename/avatar 下方的一句话介绍
description: Hi, nice to meet you!
|
修改cover文件
将cover.ejs文件中将代码添加 if 判断语句，如果配置文件添加了背景图片，则使用cover_banner进行渲染，否则就按照cover渲染
文件地址：\themes\cards\layout\_partial\source\cover.ejs
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
| <%- partial('./header', null, {cache: false, path: path}) %>
<% if (page.cover !== false) { %>
<% if (theme.cover.banner) { %>
<div class="cover_banner" style='background-image:url("<%= theme.cover.banner%>")'>
<% } else { %>
<div class="cover">
<% } %>
<div class="cover__logo">
<% if (theme.cover.avatar) { %>
<img no-lazy alt="author Image" class="cover__avatar" src="<%= url_for(theme.cover.avatar) %>">
<% } else if (theme.cover.sitename) { %>
<h1><%= theme.cover.sitename %></h1>
<% } else if (config.title) { %>
<h1><%= config.title %></h1>
<% } %>
</div>
<% if (theme.cover.description) { %>
<div class="cover__intro">
<%- markdown(theme.cover.description) %>
</div>
<% } %>
</div>
<% } %>
|
至此设置完成 命令：
hexo -c hexo -s -g
查看效果
参考链接
- Theme Cards 基本配置 https://theme-cards.ichr.me/config/
- Cards主题个性化 http://starnight.top/2021/09/24/Cards主题个性化/
评论