神代綺凜

[已完结] 哔哩哔哩 Nekopara B站网页萌化主题
終わりました。
扫描右侧二维码阅读全文
02
2017/09

[已完结] 哔哩哔哩 Nekopara B站网页萌化主题

終わりました。

Bilibili萌化 ネコパラ

最后更新时间:2019-09-08

过去和未来

这个样式原本是我开始学 CSS 的时候 xjb 写的一个东西,其实仅仅是为了熟悉各种属性的运用以及积累一些实际经验

差不多三年过去了,回头再看,样式本身其实十分臃肿,另外,B站样式频繁的改版是必然的,并且也使得成为了社畜的我很难维护并维持当时的自己写出来的大杂烩的样子

而且新版B站的 UI 设计很好,我挑不出什么刺来,我觉得我很多 xjb 改的地方都是多余的

所以我决定重新开始做一些微小的工作,仅仅为了 nekopara 而做一个很简单的附加式的皮肤,只保留我之前做的一些 UI 图片资源,剩下的,原来是什么样的,就还是什么样的

附加功能

  • 去页面推广、广告
  • 隐藏了旧版视频播放器顶部消息栏
  • 对导航栏应用了一些人性化调整
  • 在旧版视频播放界面播放器全屏网页全屏状态下,将鼠标放在右侧边缘可呼出播放器右侧面板

安装

使用前还需要先安装 Stylus 插件

并在 Stylus 插件设置中开启“通过 HTML[stylus-iframe] 方式改变 iframes 的 css”,可解决本样式造成的部分 iframe 背景问题

插件设置可通过 右击 Stylus 插件图标 - 选项 来进入

搬瓦工VPS优惠套餐,建站稳如狗,支持支付宝,循环出账94折优惠码BWH3HYATVBJW,双十一 %11 优惠码BWH20201111
年付$47CN2线路,1核/1G内存/20G硬盘/1T@1Gbps【点击购买
季付$47CN2 GIA线路,1核/1G内存/20G硬盘/1T@2.5Gbps【点击购买
Last modification:September 8th, 2019 at 06:13 pm
If you think my article is useful to you, please feel free to appreciate

Leave a Comment

500 comments

  1. &  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 76.0.3809.132(Google Chrome 76.0.3809.132)
    ヾ(´・ ・`。)ノ"更新了还是有广告欸
    1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 76.0.3809.132(Google Chrome 76.0.3809.132)
      @& 麻烦截个广告所在位置的图
      传到图床上贴一下链接 https://sm.ms
      1. &  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 76.0.3809.132(Google Chrome 76.0.3809.132)
        1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 76.0.3809.132(Google Chrome 76.0.3809.132)
          @& 好了,写的时候忘了关adblock了
          1. &  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 76.0.3809.132(Google Chrome 76.0.3809.132)
            @神代綺凜 辛苦大大了ヾ(≧∇≦*)ゝ
  2. 呆毛洗衣机  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 76.0.3809.132(Google Chrome 76.0.3809.132)
    b站首页大改版了 绮凛大大有空可以考虑兼容下么
    1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 76.0.3809.132(Google Chrome 76.0.3809.132)
      @呆毛洗衣机 周末改
      1. 呆毛洗衣机  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 76.0.3809.132(Google Chrome 76.0.3809.132)
        @神代綺凜 辛苦了( ,,´・ω・)ノ"
  3. seasmogchan  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 76.0.3809.132(Google Chrome 76.0.3809.132)
    首页右侧导航条“排序”和“返回顶部”两个按钮鼠标悬停时显示的文字错位或者不全了。似乎是B站某次修改后就出现了这个问题。期待在你的完结版里能够修改好୧(๑•̀⌄•́๑)૭
  4. 余水  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 76.0.3809.132(Google Chrome 76.0.3809.132)
    最近有更新打算嘛,可能B站的样式改了,搜索页面的结果框背景变成透明的了
    1. 神代綺凜  Mac OS X 10.14.6(Mac OS X 10.14.6) / Google Chrome 76.0.3809.100(Google Chrome 76.0.3809.100)
      @余水 最近工作比较忙……大概下周或者下下周会出个很简单的完结版样式
      1. 余水  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 76.0.3809.132(Google Chrome 76.0.3809.132)
        @神代綺凜 完结版的意思是以后不再维护了嘛
        1. 神代綺凜  Mac OS X 10.14.6(Mac OS X 10.14.6) / Google Chrome 76.0.3809.100(Google Chrome 76.0.3809.100)
          @余水 是,就是保留所有我自己做的 nekopara 素材的样式,不再修改b站本身的布局,以后只要没有大问题都不会再更新了
  5. 迷路也是路  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 75.0.3770.142(Google Chrome 75.0.3770.142)
    是因为我的网不行吗? 背景图经常加载不出来。。。
  6. Vergissmeinnicht  Windows 10 x64 Edition(Windows 10 x64 Edition) / Firefox 68.0(Firefox 68.0)
    我的推广那一栏(在线人数、投稿数下面)的图片刷不出来了。。
    1. 神代綺凜  Mac OS X 10.14.5(Mac OS X 10.14.5) / Google Chrome 75.0.3770.142(Google Chrome 75.0.3770.142)
      @Vergissmeinnicht 静态资源已经迁移了,现在图片加载应应该会快很多了
      1. Vergissmeinnicht  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 75.0.3770.142(Google Chrome 75.0.3770.142)
        @神代綺凜 解决了,原来是我装的一个广告拦截扩展的问题(→_→)
        1. 薄叶歌  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 81.0.4044.113(Google Chrome 81.0.4044.113)
          @Vergissmeinnicht 大佬辛苦了
  7. Sora  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 74.0.3729.169(Google Chrome 74.0.3729.169)
    使用这个皮肤,B站订阅的动态一直刷新不出来,一片空白,要卡很久
    1. 神代綺凜  Mac OS X 10.14.5(Mac OS X 10.14.5) / Google Chrome 75.0.3770.142(Google Chrome 75.0.3770.142)
      @Sora 如果你说的是右上角导航栏那个,请看文章的“使用”部分
    2. 神代綺凜  Mac OS X 10.14.5(Mac OS X 10.14.5) / Google Chrome 75.0.3770.142(Google Chrome 75.0.3770.142)
      @Sora 今晚会迁移静态资源到 Coding Pages 改善访问
  8. 空白  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 74.0.3729.131(Google Chrome 74.0.3729.131)
    好腻害OωO
  9. Lolicon  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 75.0.3770.142(Google Chrome 75.0.3770.142)
    视频播放页板块hover加个阴影跟丢丢透明w?
    1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 75.0.3770.142(Google Chrome 75.0.3770.142)
      @Lolicon 我打算放弃这些大杂烩样式了,实在是不太行
      1. Lolicon  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 75.0.3770.142(Google Chrome 75.0.3770.142)
        @神代綺凜 是要重做(咕咕咕)了吗
        1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 75.0.3770.142(Google Chrome 75.0.3770.142)
          @Lolicon 也不算重做,大概就是去掉所有杂七杂八的

          目前在入职培训,先咕到一周后

          1. Lolicon  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 75.0.3770.142(Google Chrome 75.0.3770.142)
            @神代綺凜 实时版聊海星233
            嘛辛苦了鸭~
  10.   Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 64.0.3282.204(Google Chrome 64.0.3282.204)
    那个,背景刷不出来了
  11. XZL  Windows 8.1 x64 Edition(Windows 8.1 x64 Edition) / Google Chrome 69.0.3497.100(Google Chrome 69.0.3497.100)
    不知能否在搜索结果中出现的“番剧”部分增加白色背景(目前为无背景)以减少和自定义背景的冲突呢?
  12. ㄒㄐㄍㄢ  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 74.0.3729.169(Google Chrome 74.0.3729.169)
    麒麟麒麟,搜索结果页面,如果切换了分类(综合、视频、用户啥的),样式会崩,刷新之后又回来了,另外分类栏能不能加个背景,看不清。。。
    1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 74.0.3729.169(Google Chrome 74.0.3729.169)
      @ㄒㄐㄍㄢ 好的,马上就修(咕咕咕)
  13. 神呪様  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 74.0.3729.131(Google Chrome 74.0.3729.131)
    拜托了,无论是新版播放器还是老版播放器一定要把评论居中好吗?划到下面偏向一边我要死了啊啊啊啊OωO
  14. YYDXDEKR  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 74.0.3729.108(Google Chrome 74.0.3729.108)
    播放页面的 侧栏相关推荐 遇到标题过长的情况会伸到背景外面去
  15. 风吹名无  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 70.0.3538.110(Google Chrome 70.0.3538.110)
    主页可用,点击具体的分区就会失效(播放页无误)
    你有什么头猪吗?
    (感觉大问题没有,毕竟结构一致)
  16. Tsing  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 73.0.3683.86(Google Chrome 73.0.3683.86)
    新版播放器宽屏模式下右侧与弹幕内容显示区域有重叠,部分超出。
    1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 73.0.3683.103(Google Chrome 73.0.3683.103)
      @Tsing 宽屏模式下原本就会覆盖弹幕列表,这个不是BUG
      超出一部分以及边框轮廓样式问题是已知问题,这阵子忙完后找时间细调
  17. ㄒㄐㄍㄢ  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 73.0.3683.103(Google Chrome 73.0.3683.103)
    在看番剧的时候新版h5播放器有bug,视频以下的部分背景会透明(普通视频没有这个bug) 想看个评论都看不清
    1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 73.0.3683.103(Google Chrome 73.0.3683.103)
      @ㄒㄐㄍㄢ 看了下,番剧页面的元素id和普通视频是不一样的,需要调一下
      这阵子要肝毕业论文比较忙,先暂时忍一会吧
      1. ㄒㄐㄍㄢ  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 73.0.3683.103(Google Chrome 73.0.3683.103)
        @神代綺凜 邮件QQ给我分到垃圾箱了,现在才看到。。。其实之前就看到这个小bug了,但是记得你说等B站新UI来着,于是我就切回旧版本的啦 最近想起来B站有新h5播放器了,一切回去发现bug还在,以防万一,我就汇报一下吧
        1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 73.0.3683.103(Google Chrome 73.0.3683.103)
          @ㄒㄐㄍㄢ 主要因为我平时不用PC补番来着,所以一直没注意有这个问题
          1. ㄒㄐㄍㄢ  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 73.0.3683.103(Google Chrome 73.0.3683.103)
            @神代綺凜 我也少,正好前几天碰巧,另外为什么这个消息没有提醒 甚至不在垃圾箱里——连邮件都没有 我记得以前是有的啊
            1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 73.0.3683.103(Google Chrome 73.0.3683.103)
              @ㄒㄐㄍㄢ emmm,可我自己都有收到邮件提醒
              1. ㄒㄐㄍㄢ  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 73.0.3683.103(Google Chrome 73.0.3683.103)
                @神代綺凜 刚刚那条有提醒,到垃圾箱了,但是之前的没有
  18. 小见  Windows 7 x64 Edition(Windows 7 x64 Edition) / Google Chrome 72.0.3626.121(Google Chrome 72.0.3626.121)
    大佬用了之后动态预览会加载不出来
    1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 73.0.3683.103(Google Chrome 73.0.3683.103)
      @小见 请根据“使用”所说的步骤设置一下
  19. Trayler  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 63.0.3239.26(Google Chrome 63.0.3239.26)
    大佬什么时候把视频分类主页也完善一下 有强迫症
    1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 73.0.3683.103(Google Chrome 73.0.3683.103)
      @Trayler 大概不会了吧……
      1. 风吹名无  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 70.0.3538.110(Google Chrome 70.0.3538.110)
        @神代綺凜 那个……分类主页好像只需在比对正则加一个
        ^https?://www.bilibili.com/(.*)
        就可以了,是这样吗?
        1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 73.0.3683.103(Google Chrome 73.0.3683.103)
          @风吹名无 这相当于对整个域生效了,不推荐,如果你这样用着没觉得有什么问题那也没啥关系了
  20. 某二次元的波波  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 63.0.3239.132(Google Chrome 63.0.3239.132)
    建议背景换个图床,现在加载太慢了,我换了https://miao.su/这个图床后,秒加载|´・ω・)ノ
    1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 73.0.3683.103(Google Chrome 73.0.3683.103)
      @某二次元的波波 我现在背景直接用的 Github Pages,有点慢正常,但能保证资源可用性
      你知道我为什么宁愿用慢一点的 Github Pages 吗,就是因为在两年前 https://miao.su/ 宕了两周,搞得我差点没能把数据拿出来
      后来我也尝试过好几个其他的国内图床,都不稳定,最后才打算直接用的 Github
      1. 某二次元的波波  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 63.0.3239.132(Google Chrome 63.0.3239.132)
        @神代綺凜 emmmm......好吧,不过加载确实太慢了,动态列表要好久才加载出来,不知道能不能换个好点的方法?
        1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 73.0.3683.103(Google Chrome 73.0.3683.103)
          @某二次元的波波 只有替换进去的壁纸壁纸这类静态资源才走的 Github 鸭,动态列表载入慢那你只能怪B站和家里网络了
          1. 某二次元的波波  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 63.0.3239.132(Google Chrome 63.0.3239.132)
            @神代綺凜 不是,是顶栏的动态下拉列表,上次更新了以后那个列表也有背景了,如果背景没加载出来动态列表也加载不出来

            就这个列表
            1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 73.0.3683.103(Google Chrome 73.0.3683.103)
              @某二次元的波波 看一下使用里的说明

              并建议在 Stylus 插件设置中开启“通过 HTML[stylus-iframe] 方式改变 iframes 的 css”,可解决本样式造成的部分 iframe 背景问题

              我还是去加个粗好了……

              1. 某二次元的波波  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 63.0.3239.132(Google Chrome 63.0.3239.132)
                @神代綺凜 哦好的,解决了,谢谢