Cards 魔改

Cover image
前言

虚拟机的简绍这里就不多说了,因为没有时间去查资料,所以下面我会直接开始教程。 你按照我的教程很简单,有什么问题可以直接群里问我。

头部图标替换

替换准备

进入Iconfont网站的图标下载到本地

引入CSS

先把刚才下载的文件解压出来,然后放到这个目录下

cards\source\css\style\

打开main.styl这个文件在上面的目录中
引入CSS 文件

@import 'font/iconfont.css';

提示:这里的font是刚才自己的解压出来得文件夹

打开header文件

找到下面的目录

\cards\layout\_partial\source

找到这段代码并且注释掉

<% theme.navbar.menu.forEach((item) => { %>
<a href="<%= url_for(item.url) %>" class="navbar-menu button"><%= item.name %></a>
<% }); %>

添加自己的图标

<a href="/" class="iconfont icon-shouye"></a>
<a href="/archives" class="iconfont icon-guidang"></a>
<a href="/about" class="iconfont icon-wode"></a>
<a href="/artitalk" class="iconfont icon-feichuan2"></a>

修改heaer的CSS

找到下面目录中的header.styl

cards\source\css\style\_functions

找的下面的代码

.header__right

然后在下面添加

.icon-shouye
.icon-guidang
.icon-wode
.icon-feichuan2
text-decoration none
font-size 22px
padding 16px 10px 16px 10px
border-radius 5px

首页卡片弧度自定义

配置文件设置

主题的配置文件可以直接开启卡片圆角

# 弧度设置
radius:
main_radius: 5px

但是如果添加头图,这个连头图左右下角,也会添加圆角
个人感觉不好看

自定义弧度

找到下面的目录

cards\source\css\style\_pages

打开post.styl这个文件
找到下面这段代码

.post-entry__header
.post__header
margin calc(var(--space) * -1) !important
margin-bottom calc(var(--space) / 2) !important
overflow hidden
border-radius $radius_main

border-radius $radius_main注释掉添加下面的代码

border-top-left-radius:2em;
border-top-right-radius:2em;
Cards 魔改
本文作者
阿贤
发布于
March 2. 2021
许可协议
转载或引用本文时请遵守许可协议,注明出处、不得用于商业用途!
服务器存储与集群技术---笔记黑苹果安装
Comment

评论如无特殊原因均不会被删除,提交前请三思。
你应该懂得如何发表适当的观点,请对自己的言论负责。