再次声明，源计划-赛博的内容都是我尝试最近学到的新内容，试验我自己的想法而进行的。我目前的计划是尽快的把自己所思所想实现出来。所以没有足够的精力去把教程做成小白也能看懂的样子。
这个魔改本就不是为了没有前端基础的人准备的。看前做好备份，实现不了就回退。不甘心就学下前端。字体，配色，对齐这些鸡毛蒜皮的东西不要整天跑我这里来念叨bug，bug，bug。
点击查看更新记录
更新记录
2022-12-31:内测版
- 通过input标签选中后的checked搭配兄弟相邻选择器，实现持续控制显隐。
- 重写卡片布局。尽量简化卡片内容。
- 配色待优化。
点击查看参考教程
参考方向 | 教程原贴 |
|---|---|
参考了UI风格和配色样式 | Neon-Space-Rainmeter |
参考了UI风格和配色样式 | JARVIS-Highpitched-OS |
fontawesome图标文档 | fontawesome |
Flex布局参数解释 | Flex 布局教程:语法篇 - 阮一峰的网络日志 |
Transition属性实现平滑过渡动画 | CSS3实现伪类hover离开时平滑过渡效果示例 |
CSS伪类实现三角形绘制 | 纯CSS 实现绘制各种三角形(各种角度) - saucxs - 博客园 |
使用clip-path实现多边形剪裁。 | 不可思议的CSS之clip-path |
使用transform-origin控制旋转圆心 | css3如何设置rotate旋转点 |
魔改步骤
重写[Blogroot]themesbutterflylayoutincludeswidgetcard_author.pug,
if theme.aside.card_author.enable
.card-widget.card-author
.item-headline
i.fa-solid.fa-circle-user
span= _p('aside.card_author')
.author-main-content
.author-check-content
label.author-info(for="author-info")
input#author-info(type="checkbox" name="author-info")
.author-avatar
img(src=url_for(theme.avatar.img) onerror=`this.onerror=null;this.src='` url_for(theme.error_img.flink) `'` alt="avatar")
.author-name= config.author
.author-switch-content
input.switch-content(type="radio" name="switch-content" value="description")
label.author-description-box
.author-description!= theme.aside.card_author.description || config.description
input.switch-content(type="radio" name="switch-content" value="social")
label.author-social-box
if theme.aside.card_author.button.enable
a.card-author-button(href=theme.aside.card_author.button.link)
i(class=theme.aside.card_author.button.icon)
span=theme.aside.card_author.button.text
if(theme.social)
.social-icons
!=fragment_cache('social', function(){return partial('includes/header/social')})
input.switch-content(type="radio" name="switch-content" value="site-data")
label.author-data-box
.site-data
a.data-item(href=url_for(config.archive_dir) '/')
.data-name= _p('aside.articles')
.data-length= site.posts.length
a.data-item(href=url_for(config.tag_dir) '/')
.data-name= _p('aside.tags')
.data-length= site.tags.length
a.data-item(href=url_for(config.category_dir) '/')
.data-name= _p('aside.categories')
.data-length= site.categories.length新建[Blogroot]themesbutterflysourcecss_layoutcyber_card_author.styl,
//default color:
:root
--card-author-avatar-groove-border: rgba(244, 252, 252, 0.3)
--card-author-avatar-dashed-border: rgba(70, 162, 223, 0.3)
--card-author-name-background: rgba(35, 32, 32, 0.8)
--card-author-font-color: #ffffff
--card-author-name-decoration: #ffa500
--card-author-radio: rgba(73, 176, 245, 0.8)
--card-author-radio-checked: rgba(252, 126, 0, 0.8)
[data-theme="dark"]
--card-author-avatar-groove-border: rgba(146, 206, 241, 0.6)
--card-author-avatar-dashed-border: rgba(0, 77, 119, 0.8)
--card-author-name-background: rgba(80, 80, 80, 0.598)
--card-author-font-color: #ffffff
--card-author-name-decoration: #f2eff0
--card-author-radio: rgba(73, 176, 245, 0.558)
--card-author-radio-checked: rgba(212, 31, 31, 0.58)
.card-widget
&.card-author
height: auto
width: 100%
position: relative
display: flex
justify-content: center
flex-direction: column
.author-main-content
.author-check-content
label.author-info
height: 150px
width: 100%
display: flex
flex-direction: row
align-items: center
justify-content: space-around
input[type="checkbox"]#author-info
display: none
&:checked
&~ .author-name
display: flex
transform-origin: left
animation: ejectrotate 0.4s cubic-bezier(0.59, 0.01, 0.48, 1.17) 1
.author-avatar
z-index: 1
position: relative
img
width: w = 90px
height: w
&::before
content: "";
width: w = 90px
height: w
position: absolute;
background: transparent;
border: 10px groove var(--card-author-avatar-groove-border);
box-shadow: 0 0 10px var(--card-author-avatar-dashed-border);
border-radius: 50%;
left: -10px;
top: -10px;
animation: borderrotate 3s linear infinite alternate
&::after
content: "";
width: w = 80px
height: w
position: absolute;
background: transparent;
border: 5px dashed var(--card-author-avatar-dashed-border);
box-shadow: 0 0 5px inset var(--card-author-avatar-groove-border);
border-radius: 50%;
left: 0px;
top: 0px;
animation: borderrotate 10s linear infinite
.author-name
background: var(--card-author-name-background)
color:var(--card-author-font-color)
box-shadow: 0 0 10px inset var(--card-author-avatar-groove-border);
position: relative
z-index: 0
height: 100px
display: none
width: 160px
align-items: center
font-size: 30px
justify-content: center
margin: 0 0 0 -25px
clip-path: polygon(0 20px, 20px 0, 100% 0, 100% 15px, calc(100% - 15px) 25px, calc(100% - 15px) calc(100% - 25px), 100% calc(100% - 15px), 100% 100%, calc(50% 15px) 100%, 50% calc(100% - 15px), 20px calc(100% - 15px), 0 calc(100% - 30px))
&::before
content: ""
position: absolute
height: 100px
width: 160px
background: var(--card-author-name-decoration)
clip-path: polygon(15% 30%, 30% 30%, 35% 20%, 20% 20%, 15% 30%, 40% 30%, 45% 20%, 60% 20%, 55% 30%, 35% 30%, 65% 30%, 70% 20%, 85% 20%, 80% 30%, 15% 30%, 15% 70%, 80% 70%, 85% 80%, 20% 80%, 15% 70%, 15% 30%)
.author-switch-content
width: 100%
height: 200px
display: flex
flex-direction: row
flex-wrap: nowrap
justify-content: center
input[type="radio"].switch-content
width: 60px
height: 0
margin: 0 5px
position: relative
&::after
content: ""
width: 60px
height: 20px
background: var(--card-author-radio)
display: block
&[value="description"]
&::after
clip-path: polygon(100% 0%, 75% 50%, 100% 100%, 25% 100%, 0% 50%, 25% 0%);
&:checked
&::after
background: var(--card-author-radio-checked)
&~ .author-description-box
clip-path: inset(0%);
&[value="social"]
&::after
clip-path: polygon(0% 50%, 25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%);
transition: all 0.5s cubic-bezier(0.59, 0.01, 0.48, 1.17)
&:checked
&::after
background: var(--card-author-radio-checked)
&~ .author-social-box
clip-path: inset(0%);
transition: all 0.5s cubic-bezier(0.59, 0.01, 0.48, 1.17)
&[value="site-data"]
&::after
clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 25% 50%, 0% 0%);
&:checked
&::after
background: var(--card-author-radio-checked)
&~ .author-data-box
clip-path: inset(0%);
transition: all 0.5s cubic-bezier(0.59, 0.01, 0.48, 1.17)
label
font-family: 'TaikoMagic';
display: flex
position: absolute;
bottom: 0px;
height: 160px;
width: 100%
align-items: center;
justify-content: center;
clip-path: inset(50%);
transition: all 0.5s cubic-bezier(0.59, 0.01, 0.48, 1.17)
&.author-description-box
.author-description
font-size: 18px!important;
word-break: break-all
color: var(--card-author-font-color)!important
&.author-social-box
flex-direction: column;
.card-author-button
color: var(--card-author-font-color)!important
.social-icons
a
margin: 0 5px
font-size: 26px!important
&.author-data-box
.site-data
align-items: center;
justify-content: center;
display: flex;
a
margin: 0 20px;
color: var(--card-author-font-color)
@keyframes ejectrotate
0%
transform: rotateZ(90deg);
opacity: 0
100%
transform: rotateZ(0deg);
opacity: 1
@keyframes borderrotate
0%
transform: rotateZ(0deg);
100%
transform: rotateZ(360deg); 修改[Blogroot]themesbutterflylanguageszh-CN.yml,新增卡片名称：
aside:
articles: 文章
tags: 标签
categories: 分类
Link: 友人帐
About: 关于
card_author: 作者信息
card_friend_link: 通讯录
card_announcement: 告示牌卡片外框是沿用了另一篇文章的版块。参考源计划-赛博风格侧栏卡片样式修改进行修改。本文不再赘述。
