hexo + matery主题美化分类页
2023-02-19 12:20:01 时间
最近新换了个博客主题,matery,感觉这个主题还挺好看的。 相信很多人和我一样,换了主题就想着各种美化,魔改,怎奈技术不到位,自己没有这个能力,只能在网上看看别人是怎么改的,然后自己照做。废话不多说,步入正题。
先给看下效果图吧,喜欢就接着往下看
文章分类页美化
引入代码
首先,打开”/layout/category-cloud.ejs”文件
找到下面代码
<span class="chip center-align waves-effect waves-light
<% if (isCategory && category.name == page.category) { %> chip-active <% } else { %> chip-default <% } %>"
style="background-color: <%- color %>;"><%- category.name %>
<span class="tag-length"><%- category.length %></span>
</span>
将上面代码修改为下面代码
<div class="moleskine-wrapper">
<div class="moleskine-notebook">
<div class="chip notebook-cover center-align waves-effect waves-light
<% if (isCategory && category.name == page.category) { %> chip-active <% } else { %> chip-default <% } %>"
style="background-color: <%- color %>;">
<div
class="notebook-skin
<% if (isCategory && category.name == page.category) { %> chip-active <% } else { %> chip-default <% } %>">
<%- category.name %>
</div>
</div>
<div class="notebook-page dotted"></div>
</div>
</div>
设置css
将下面代码放在category-cloud.ejs
文件末尾
<style>
/* 文章分类书本样式 */
.chip-container .tag-chips {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
.chip-container .tag-chips a {
margin: 0 7px 10px;
}
.chip-container .chip {
max-width: calc(100% / 4);
min-width: 10em;
height: 200px;
position: relative;
transition: .5s linear;
padding: 19px 0;
line-height: 20px;
z-index: 990;
border-radius: 5px 15px 15px 5px;
transform-origin: left center 0;
}
.chip-container .notebook-cover::before {
content: "";
position: absolute;
width: 10px;
height: calc(100% + 2px);
top: -1px;
z-index: 100;
border-radius: 2px;
right: 25px;
transition: 2s ease;
/* background: linear-gradient(to right,#9c2e2b 0,#cc4b48 12%,#9c2e2b 25%,#cc4b48 37%,#9c2e2b 50%,#cc4b48 62%,#9c2e2b 75%,#cc4b48 87%,#9c2e2b 100%); */
background: linear-gradient(to right,#1e606e 0,#2e95aa 12%,#1e606e 25%,#2e95aa 37%,#1e606e 50%,#2e95aa 62%,#1e606e 75%,#2e95aa 87%,#1e606e 100%);
}
.chip .notebook-skin {
height: 50px;
width: 100%;
background: #e8e8e0;
margin-top: 42px;
padding: 10px 32px 64px 10px;
font-size: 19px;
position: relative;
z-index: 10;
color: #222;
text-align: left;
box-shadow: 0 1px 1px rgba(0,0,0,.2);
}
.chip .notebook-skin:before {
content: '';
position: absolute;
width: 100%;
height: 15px;
left: 0;
bottom: 0;
background: #cddc39;
}
.notebook-cover {
background: #cc4b48;
height: 200px;
width: 140px;
position: absolute;
border-radius: 5px 15px 15px 5px;
z-index: 10;
transition: .5s linear;
transform-style: preserve-3d;
transform-origin: left center 0;
}
.moleskine-wrapper {
max-width: calc(100% / 4);
min-width: 10em;
}
.moleskine-notebook:hover .notebook-cover {
transform: rotateY(-50deg);
z-index: 99;
box-shadow: 20px 10px 50px rgba(0,0,0,.2);
}
.moleskine-notebook {
height: 200px;
position: relative;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
transition: .5s linear;
border-radius: 5px 15px 15px 5px;
transform-origin: left center 0;
}
.moleskine-notebook:hover {
transform: rotateZ(-10deg);
}
.notebook-page.dotted {
background: linear-gradient(to bottom,#fbfae8 9px,#e4e4e4 1px);
background-size: 100% 10px;
}
.chip-container .chip:hover {
background: none;
}
.notebook-page {
height: 100%;
width: 140px;
position: absolute;
top: 10px;
background-color: #fbfae8;
z-index: 0;
border-radius: 5px 16px 16px 5px;
overflow: hidden;
}
</style>
做了如上操作,然后部署博客就可以看到变化了哦~
进一步优化
如果对颜色不满意,还可以进行颜色的调整,方法如下
打开source/css/matery.css
文件,修改下面代码:
.chip-container .chip:hover {
color: #2ea451;
opacity: .8;
}
.chip-container .chip-active {
color: #2ea451 !important;
box-shadow: 2px 5px 10px #aaa !important;
}
这里是博主自己设置的颜色,你也可以设置为自己喜欢的颜色
标签美化
标签页就很简单了呀
打开matery.css
文件,修改颜色代码
.chip-default .tag-length {
color: rgba(66, 92, 118, .8);
margin-top: 1px;
}
.chip-active .tag-length {
color: #64c45b;
}
效果如图:
相关文章
- 不可错过!普林斯顿陈丹琦最新《大语言模型理解》2022课程!全面讲述BERT、GPT、T5等大模型,附Slides
- NIC DCV远程可视化软件发布2022.2-14126版本更新
- 特斯拉又翻车了!去年上架「秒没」的儿童版越野车被全数召回
- CPU爆了,你却连那个线程出问题都不知道?
- NVIDIA 推出Isaac Sim 重大更新,提供更先进的智慧机器人模拟技术
- 发现一个号称万能的神器
- CLUE社区最新神器!PromptCLUE:大规模多任务Prompt预训练中文开源模型
- 中美AI角力场,谁将领跑人工智能的未来?
- 百岁汇编语言之母逝世!71岁时她还在和儿子合写神经网络论文
- 微软CEO说漏嘴?收购GitHub四年后首次披露业绩:年收入翻两倍超10亿美元!
- 2022富豪财富缩水排行榜:小扎873亿美元居首,币圈大佬赵长鹏第二,马斯克第三
- Google探索全新NLU任务「自然语言评估」,正式面试前让AI帮你热个身!
- 干掉雷达!特斯拉前AI总监Karpathy解密离职和纯视觉方案
- Nature研究生大调查:靠津贴根本吃不饱饭,找兼职和借债维持!
- 图森CEO离奇被炒,股价腰斩!侯晓迪突遭调查被董事会罢免
- Meta打造首个「蛋白质宇宙」全景图!用150亿参数语言模型,预测了6亿+蛋白质结构
- 模型只要「变大」就能直通AGI?马库斯再次炮轰:三个危机已经显现!
- 耶鲁「伉俪科学家」Science发文:搞科研夫妻联手,越干越有!
- 北大直博保送生论文涉嫌抄袭?原作者实名举报,北大南开火速调查
- 网友白嫖画师原作训练Stable Diffusion引正主不满:未经同意,说用就用?