hexo自制卡片展示页面


预览

卡片的效果和教程以及代码

bilibili YouTube

将其运用在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)模板里,可以方便其他布局引用,方便维护。


评论
  目录