预览
卡片的效果和教程以及代码
将其运用在hexo搭建的博客中
思路
hexo中添加自定义页面
如果想要自定义一个页面,将其放在source
文件夹内,同时不希望hexo利用主题渲染它,要在博客的_config.yml中skip_render这项中添加想要跳过渲染的文件和文件夹。参考这篇文章。本文主要目的不在于此。
希望新页面被主题渲染
由于默认布局为post,如果没有选择跳过渲染,会按照主题post的布局对添加的页面进行渲染。因为我要添加的页面不是文章展示用途。可以在主题的layout
文件夹中添加一个新的布局,利用局部模板Partial使运用该布局的页面拥有和主题相统一的风格,比如页首页脚侧边栏等,又容纳了自定义的内容。详情了解:hexo使用文档:模板
示例(新页面keywords)
1.添加自定义页面
在根目录的source
下新建文件夹keywords,文件夹中包含index.md.
编辑index.md 添加front-matter并保存。
---
title: keywords #标题
type: "keywords"
layout: "keywords" #布局为keywords
---
2.添加新布局
在themes/主题/layout
中添加keywords.ejs
.内容可以照搬其他布局,只是将自己的代码段替换到相应位置。
例如matery主题的categories.ejs
内容如下,复制到keywords.ejs
中。
<%- partial('_partial/bg-cover') %>
<%- partial('_widget/category-cloud') %>
<% if (site.categories && site.categories.length > 0) { %>
<%- partial('_widget/category-radar') %>
<% } %>
将main标签替换成我的展示卡片。
<kwbd>
<!-- 卡片容器 -->
<div class="ctr">
<!-- 卡片盒子 -->
<div class="bx">
<!-- 图片盒子 -->
<div class="imgbx">
<img src="assassin.jpg" alt="">
</div>
<!-- 文字内容 -->
<div class="para">
<h2>Assassin's Creed</h2>
<p>Assassin's Creed is an action-adventure stealth video game franchise published by Ubisoft and developed mainly by its studio Ubisoft Montreal.</p>
<a href="#">Read More</a>
</div>
</div>
<div class="bx">
<div class="imgbx">
<img src="assassin.jpg" alt="">
</div>
<div class="para">
<h2>关键词页面</h2>
<p>自定义了一个hexo页面。可以移植到别的主题中。</p>
<a href="#">Read More</a>
</div>
</div>
<div class="bx">
<div class="imgbx">
<img src="assassin.jpg" alt="">
</div>
<div class="para">
<h2>响应式卡片动画</h2>
<p>因为我学术不精,目前只能把图片和文字内容写死在代码中。</p>
<a href="#">Read More</a>
</div>
</div>
<div class="bx">
<div class="imgbx">
<img src="assassin.jpg" alt="">
</div>
<div class="para">
<h2>计划(画饼</h2>
<p>用函数传递内容,可以在_config.yml中自定义内容。还可以指向具体文章。</p>
<a href="#">Read More</a>
</div>
</div>
</div>
</kwbd>
css:
kwbd
{
margin: 0; /*外边距*/
padding: 0; /*内边距*/
min-height: 100vh; /*最小高度*/
display: flex; /*盒模型*/
display:-webkit-flex;/*盒模型*/
background:#6c8094; /* 背景颜色 */
justify-content: center; /*文档X轴布局*/
align-items: center; /*文档Y轴布局*/
font-family: consolas;
}
.ctr{
position: relative;
width: 1200px;
display: flex; /*弹性布局*/
flex-wrap: wrap; /* 换行*/
justify-content: space-around;
}
.ctr .bx{
position: relative;
width: 280px;
height: 400px;
margin: 20px 0;
box-shadow: 0px 0px 20px 0px #333;
box-sizing: border-box;
overflow: hidden; /*溢出隐藏*/
}
.ctr .bx .imgbx{
position: absolute;
top: 0;
left: 0; /*图片贴顶*/
width: 100%;
height: 100%;
background: #000;
clip-path: circle(400px at center 100px); /*图片遮罩*/
transition: 0.4s; /*动画时间*/
}
.ctr .bx:hover .imgbx{
clip-path: circle(80px at center 100px);/*hover效果的图片遮罩*/
}
.ctr .bx .imgbx img{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover; /*图片剪裁适应内容框*/
}
.ctr .bx .para{
position: absolute;
left: 0;
bottom: 0; /*文字内容贴底*/
width: 100%;
height: 55%; /*卡片容器的0.55倍高度*/
padding: 20px;
text-align: center;
}
.ctr .bx .para h2{
margin: 0;
padding: 0;
}
.ctr .bx .para a{
text-decoration: none;
background: #000;
color: #fff;
padding: 5px;
display: inline-block;
}
.ctr .bx .para h2,
.ctr .bx .para p,
.ctr .bx .para a{
opacity: 0; /*透明度*/
transition: 0.4s;
transform: translateY(20px);
}
.ctr .bx:hover .para h2{
opacity: 1;
transform: translateY(0px);
transition-delay: 0.3s;
}
.ctr .bx:hover .para p{
opacity: 1;
transform: translateY(0px);
transition-delay: 0.5s;
}
.ctr .bx:hover .para a{
opacity: 1;
transform: translateY(0px);
transition-delay: 0.7s;
}
3.使用
图片放在source/keywords
文件夹中,虽然ejs文件中是可以写css和html代码的,为了简洁还是将css分离,写在themes/主题/source/css/keywordsstyle.css
中,那么keywords.ejs
中添一行引用外部样式。
<link rel="stylesheet" href="../css/keywordsstyle.css">
<!-- 部署后keywords/index.html和keywordsstyle的相对路径 -->
其他
EJS 支持直接在标签内书写简单、直白的 JavaScript 代码。只需让 JavaScript 输出你所需要的 HTML ,完成工作很轻松!
目前将卡片的内容写死在布局文件中,并不易用且有门槛。后面打算将卡片内容和布局代码分离开,利用函数实现更灵活的自定义功能。
结合hexo的官方文档,分析现有主题的布局、功能实现。
我发现我构想的功能大体上和博客首页文章卡片、缩略图、信息、链接原理一致。可是我不会。(dogge
随便玩玩,等到真能实现了,就可以自制主题了。另外可以把卡片单独放在局部模板(partial)或者小部件(widget)模板里,可以方便其他布局引用,方便维护。