使用须知
本项目目前还是内测状态，样式优先考虑与本站的兼容，对于默认主题的兼容性适配暂时延后。一切以将本站装点完成为最优先事项。 我以前往侧栏按钮里丢过不少功能按钮，所以rightside.pug已经和原版不一样了，但是原理还是基本不变的。我会尽可能在文章里给出示例和声明一些必要的改动步骤。 源计划-赛博的魔改内容本就不是为零基础的小白设计的。所以没有前端基础的不要来使用，我也没有足够的精力来辅导。
点击查看更新记录
更新记录
2022-12-26:内测版
- 电脑端样式，异形切面
- 手机端样式，镶嵌圆形
点击查看参考教程
参考方向 | 教程原贴 |
|---|---|
参考了UI风格和配色样式 | Neon-Space-Rainmeter |
参考了UI风格和配色样式 | JARVIS-Highpitched-OS |
fontawesome图标文档 | fontawesome |
Flex布局参数解释 | Flex 布局教程:语法篇 - 阮一峰的网络日志 |
Transition属性实现平滑过渡动画 | CSS3实现伪类hover离开时平滑过渡效果示例 |
CSS伪类实现三角形绘制 | 纯CSS 实现绘制各种三角形(各种角度) - saucxs - 博客园 |
使用clip-path实现多边形剪裁。 | 不可思议的CSS之clip-path |
预览效果
点击查看预览效果
魔改步骤
新建[Blogroot]themesbutterflysourcecss_layoutcyber_rightside.styl,手机端配色懒得再写一组变量名了，就看着那个颜色顺眼用哪个了。
:root
--rightside-background: rgba(14,14,14,0.95)
--rightside-background-hover: rgba(180, 50, 35, 0.95)
--rightside-font-color: #ffffff
--rightside-box-shadow: #888888
--rightside-icon-background: rgba(101, 103, 107,0.6)
--rightside-icon-color: #ffffff
--rightside-icon-shadow: #b6bac3
--rightside-corner-background: #c27314
--rightside-corner-color: #cdcdcd
--rightside-corner-shadow: #222222
[data-theme="dark"]
--rightside-background: rgba(35, 50, 68,0.75)
--rightside-background-hover: rgba(83, 65, 165, 0.95)
--rightside-font-color: #ffffff
--rightside-box-shadow: #888888
--rightside-icon-background: rgba(45, 45, 60,0.6)
--rightside-icon-color: #2983be
--rightside-icon-shadow: #2d342b
--rightside-corner-background: #2983be
--rightside-corner-color: #ffffff
--rightside-corner-shadow: #222222
//电脑端样式，斜面异形
@media screen and (min-width: 900px)
#rightside
bottom: 30px
font-family: 'SAOUI','ZhuZiAYuanJWD' //字体样式，可以自行替换
&> div > button,
&> div > a
display: flex;
position: relative
padding: 6px 15px 0px 0px;
width: 135px;
height: 50px;
border-radius: 0px;
background-color: var(--rightside-background);
color: var(--rightside-font-color);
clip-path: polygon(100% 0, 60px 0, 50px 10px, 30px 10px, 0 40px, 0 100%, 50px 100%, 60px 40px, calc(100% - 10px) 40px, 100% 30px);
box-shadow: 1px 0px 5px var(--rightside-box-shadow) inset;
border-radius: 35px 0px 30px 0px;
align-items: flex-start;
flex-direction: row-reverse;
justify-content: flex-start;
i
background: var(--rightside-icon-shadow);
border: 1px solid var(--rightside-icon-color)
box-shadow: 0px 0px 10px var(--rightside-icon-shadow) inset;
color: var(--rightside-icon-color)
border-radius: 50%;
width: 27px;
height: 27px;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 5px;
span
margin-right: 3px;
text-shadow: 1px 2px 3px var(--rightside-box-shadow)
&::before
content: "akilar";
font-size: 12px;
display: flex;
box-shadow: 0px 0px 2px var(--rightside-corner-shadow) inset;
width: 35px;
padding: 0px 0px 0px 7px;
height: 12px;
line-height: 12px;
position: absolute;
background: var(--rightside-corner-background);
color: var(--rightside-corner-color)
bottom: -1px;
left: -1px;
align-items: flex-end;
clip-path: polygon(0 0,calc(100% - 10px) 0,100% 100%,0 100%);
&::after
content: "";
display: block;
width: 16px;
height: 16px;
position: absolute;
background: var(--rightside-icon-color);
top: -1px;
right: -1px;
clip-path: polygon(50% 0%, 100% 0%, 100% 50%, 85% 50%, 85% 15%, 50% 15%, 55% 0%, 27% 0%, 27% 30%, 27% 57%, 0% 57%, 0% 70%, 27% 70%, 27% 100%, 40% 100%, 40% 70%, 70% 70%, 70% 57%, 40% 57%, 40% 30%, 27% 30%, 27% 0%);
&:hover
background: var(--rightside-background-hover)
//手机端样式，嵌入圆形
@media screen and (max-width: 900px)
#rightside
font-family: 'SAOUI','ZhuZiAYuanJWD' //字体样式，可以自行替换
bottom: 150px
&> div > button,
&> div > a
background: var(--rightside-background)
position: relative
margin-bottom: 10px
border-radius: 3px
i
background: var(--rightside-box-shadow);
color: var(--rightside-icon-color)
width: 25px;
height: 25px;
padding: 3px 3px;
border: 2px solid var(--rightside-icon-shadow);
border-radius: 50%;
span
display: none
&::before
content: "";
z-index: 2
background: var(--rightside-corner-background);
width: 35px;
height: 35px;
position: absolute;
left: 0px;
top: 0px;
clip-path: polygon(50% 50%,50% 10px,calc(50% - 3px) 10px,calc(50% - 5px) 0,calc(50% 5px) 0,calc(50% 3px) 10px,50% 10px,50% 50%,50% calc(100% - 10px),calc(50% - 3px) calc(100% - 10px),calc(50% - 5px) 100%,calc(50% 5px) 100%,calc(50% 3px) calc(100% - 10px),50% calc(100% - 10px),50% 50%,10px 50%,10px calc(50% - 3px),0 calc(50% - 5px),0 calc(50% 5px),10px calc(50% 3px),10px 50%,50% 50%,calc(100% - 10px) 50%,calc(100% - 10px) calc(50% - 3px),100% calc(50% - 5px),100% calc(50% 5px),calc(100% - 10px) calc(50% 3px),calc(100% - 10px) 50%,50% 50%);
transition: all 0.5s cubic-bezier(0.59, 0.01, 0.48, 1.17)
&::after
content: "";
z-index: 1
background: var(--rightside-box-shadow);
width: 35px;
height: 35px;
position: absolute;
border-radius: 3px
left: 0px;
top: 0px;
clip-path: polygon(10% 100%, 10% 0%, 0% 0%, 0% 100%, 10% 100%, 35% 100%, 40% 94%, 60% 94%, 65% 100%, 35% 100%, 35% 0%, 40% 6%, 60% 6%, 60% 0%, 35% 0%, 35% 100%,90% 100%,90% 0,100% 0,100% 100%,35% 100%);
&:hover
background: var(--rightside-background-hover)
&::before
left: -8px;
top: -8px;
width: 49px;
height: 49px;
transform: rotateZ(45deg);
transition: all 0.5s cubic-bezier(0.59, 0.01, 0.48, 1.17)因为主题本身是没有写按钮文字的span的。这里我是主动改了一部分源码。可以参照我的写法更改。
修改[Blogroot]themesbutterflylayoutincludesrightside.pug,给每个按钮添加一个span。简繁转换按钮需要多一些操作。以下是几个示例，以供参考。注意缩进。还有不要空格和tab混用。
when 'readmode'
if is_post() && readmode
button#readmode(type="button" title=_p('rightside.readmode_title'))
i.fas.fa-book-open.faa-pulse.animated-hover
span=_p('rightside.readmode_title')
when 'translate'
if translate.enable
- button#translateLink(type="button" title=_p('rightside.translate_title'))= translate.default
button#translateLink(type="button" title=_p('rightside.translate_title'))
i= translate.default
span=_p('rightside.translate_title')
when 'darkmode'
if darkmode.enable && darkmode.button
a.icon-V.hidden(onclick='switchNightMode()', title=_p('rightside.night_mode_title'))
svg.faa-pulse.animated-hover(width='25', height='25', viewBox='0 0 1024 1024')
use#modeicon(xlink:href='#icon-moon')
span=_p('rightside.night_mode_title')对于电脑端的异形切面样式，span内显示的文字在四个字以内效果为最佳。建议到[Blogroot]themesbutterflylanguageszh-CN.yml找到rightside部分进行调整。
rightside:
readmode_title: 阅读模式
translate_title: 简繁转换
night_mode_title: 昼夜切换
back_to_top: 回到顶部
toc: 目录
scroll_to_comment: 直达评论
setting: 设置
ranklist: 打赏榜单
SAOSwitch: 右键开关
SAORefresh: 点击刷新
chat_btn: 与我联系
live2d_widget: 看板娘
aside: 侧栏显隐简繁转换按钮在tw_cn.js中的逻辑是整个替换按钮内部的内容。所以还需要改动下替换的内容，保证在点击过后依然能显示span。修改[Blogroot]/_config.butterfly.yml中的配置项：
# Conversion between Traditional and Simplified Chinese (簡繁轉換)
translate:
enable: true
# The text of a button
default: 繁
# the language of website (1 - Traditional Chinese/ 2 - Simplified Chinese）
defaultEncoding: 2
# Time delay
translateDelay: 0
# The text of the button when the language is Simplified Chinese
- msgToTraditionalChinese: '繁'
msgToTraditionalChinese: '<i>繁</i><sapn>簡繁轉換</span>'
# The text of the button when the language is Traditional Chinese
- msgToSimplifiedChinese: '简'
msgToSimplifiedChinese: '<i>简</i><sapn>简繁转换</span>'
