源计划-赛博风格侧栏按钮样式修改

Akilar

发布于 2023-01-30 15:08:03

4630

发布于 2023-01-30 15:08:03

使用须知

本项目目前还是内测状态，样式优先考虑与本站的兼容，对于默认主题的兼容性适配暂时延后。一切以将本站装点完成为最优先事项。我以前往侧栏按钮里丢过不少功能按钮，所以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]\themes\butterfly\source\css\_layout\cyber_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]\themes\butterfly\layout\includes\rightside.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]\themes\butterfly\languages\zh-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>'

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2022-12-26，如有侵权请联系 cloudcommunity@tencent.com 删除

css

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体分享计划，欢迎热爱写作的你一起参与！

css

登录后参与评论

0 条评论

热度