神代綺凛

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

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

  1.  Home
  2. Text  
    3. Share to：

終わりました。

Bilibili萌化 ネコパラ

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

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

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

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

附加功能

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

安装

由于 userstyles.org 改版，我号登不上了，因此没法在该站继续发布样式更新，现已转至 userstyles.world，请老用户重新安装样式

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

版权声明：本文为原创文章，版权归 神代綺凜 所有。

本文链接：https://moe.best/moe-project/bilibili-nekopara.html

所有原创文章采用 知识共享署名-非商业性使用 4.0 国际许可协议 进行许可。
您可以自由的转载和修改，但请务必注明文章来源并且不可用于商业目的。

搬瓦工VPS优惠套餐，建站稳如狗，支持支付宝，循环出账94折优惠码BWH3HYATVBJW
年付$47，CN2线路，1核/1G内存/20G硬盘/1T@1Gbps【点击购买】
季付$47，CN2 GIA线路，1核/1G内存/20G硬盘/1T@2.5Gbps【点击购买】
Last modification：December 11th, 2021 at 04:05 pm
© The copyright belongs to the author
If you think my article is useful to you, please feel free to appreciate

Leave a Comment

519 comments

  1. edpage  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 68.0.3440.106(Google Chrome 68.0.3440.106)
    emmm,为啥在我21：9的屏幕上猫耳会被顶部挡住啊！
    Reply
    1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 68.0.3440.106(Google Chrome 68.0.3440.106)
      @edpage 超宽屏……因为壁纸等比缩放的缘故会这样，因为没钱所以没考虑到这种情况23333
      Reply
  2. 贫僧不是和尚  Windows 7 x64 Edition(Windows 7 x64 Edition) / Google Chrome 68.0.3440.84(Google Chrome 68.0.3440.84)
    300条评论看完了QAQ，小白一枚，膜拜一下φ(￣∇￣o)
    Reply
  3. 清晨的小麋鹿  Windows 7 x64 Edition(Windows 7 x64 Edition) / Google Chrome 66.0.3359.139(Google Chrome 66.0.3359.139)
    楼主我想自定义我自己喜欢的图片 但是自定义不了 不知道为什么
    楼主看到请回复一下 谢谢
    Reply
    1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 68.0.3440.75(Google Chrome 68.0.3440.75)
      @清晨的小麋鹿 使用图床上传图片获取URL然后填进去
      Reply
      1. 清晨的小麋鹿  Windows 7 x64 Edition(Windows 7 x64 Edition) / Google Chrome 68.0.3440.84(Google Chrome 68.0.3440.84)
        @神代綺凜 嗯嗯已经解决了 谢谢楼主啦
        那 楼主知道为什么在stylish里自定义不了么？ 我用stylish其他的也是这样自定义不了
        想在你这里注册个号但是打开注册页面就显示404
        Reply
        1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 68.0.3440.75(Google Chrome 68.0.3440.75)
          @清晨的小麋鹿 读题啊读题，请去样式页面读 Notes from latest update

          本博客不开放注册

          Reply
          1. 清晨的小麋鹿  Windows 7 x64 Edition(Windows 7 x64 Edition) / Google Chrome 68.0.3440.84(Google Chrome 68.0.3440.84)
            @神代綺凜 好吧 背景已经搞定了 谢谢啦
            Reply
  4. 爱的温度  Windows 10 x64 Edition(Windows 10 x64 Edition) / Firefox 61.0(Firefox 61.0)
    大佬最近B站网页版新版本Bilitube上线了，要不考虑下添加一个自动切换到新版的功能？OωO
    Reply
    1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 68.0.3440.75(Google Chrome 68.0.3440.75)
      @爱的温度 还在试用阶段吧，在没有正式更换UI之前我是不会动的 （懒炸了
      Reply
      1. 爱的温度  Windows 10 x64 Edition(Windows 10 x64 Edition) / Firefox 61.0(Firefox 61.0)
        @神代綺凜 （滑稽滑稽滑稽|´・ω・)ノ
        Reply
  5. shine  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 67.0.3396.99(Google Chrome 67.0.3396.99)
    发现b站新板式评论区会变透明，原来的是白板。感觉透明的这种还可以OωO
    Reply
    1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 67.0.3396.99(Google Chrome 67.0.3396.99)
      @shine 希望我的工作量会越来越轻（
      Reply
  6. seasmogchan  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 67.0.3396.99(Google Chrome 67.0.3396.99)
    期待你考完试后带来B站新界面的萌化ヾ(≧∇≦*)ゝ
    虽然肯定很辛苦了
    Reply
    1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 67.0.3396.99(Google Chrome 67.0.3396.99)
      @seasmogchan 当然已经考完试了（等b站正式使用我才会去做
      Reply
      1. seasmogchan  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 67.0.3396.99(Google Chrome 67.0.3396.99)
        @神代綺凜
        Reply
  7. ~魔法使之家~  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 67.0.3396.99(Google Chrome 67.0.3396.99)
    可以，非常萌！
    Reply
  8. 君华  Windows 7 x64 Edition(Windows 7 x64 Edition) / Google Chrome 67.0.3396.99(Google Chrome 67.0.3396.99)
    是什么主题
    Reply
    1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 67.0.3396.99(Google Chrome 67.0.3396.99)
      @君华 网页第三方样式
      自行浏览 https://userstyles.org
      Reply
      1. 黑天SkuKaLaurt  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 67.0.3396.99(Google Chrome 67.0.3396.99)
        @神代綺凜 地址嗦哪儿的节点吖|´・ω・)ノ
        Reply
        1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 67.0.3396.99(Google Chrome 67.0.3396.99)
          @黑天SkuKaLaurt 没听懂
          Reply
  9. 君华  Windows 7 x64 Edition(Windows 7 x64 Edition) / Google Chrome 67.0.3396.99(Google Chrome 67.0.3396.99)
    不懂这是什么东西....请教下
    Reply
  10. 咸鱼  Windows 7 x64 Edition(Windows 7 x64 Edition) / Maxthon 5.1.5.2000(Maxthon 5.1.5.2000)
    我的妈,今天打开B站整个页面都变样了什么情况.新版?
    Reply
    1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 67.0.3396.99(Google Chrome 67.0.3396.99)
      @咸鱼 目前可以试用新版页面，以后有的改了
      Reply
  11. Sk_god  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 63.0.3239.26(Google Chrome 63.0.3239.26)
    我想问问那个TG频道是啥呀,不科学上网还过不去
    Reply
    1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 67.0.3396.87(Google Chrome 67.0.3396.87)
      @Sk_god https://zh.wikipedia.org/wiki/Telegram
      Reply
  12. antiope  Android 8.0.0(Android 8.0.0) / Google Chrome 67.0.3396.87(Google Chrome 67.0.3396.87)
    stylish因为窃取用户历史浏览数据被Firefox和chrome下架了。。。。。
    Reply
    1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 67.0.3396.87(Google Chrome 67.0.3396.87)
      @antiope 立即更换Stylus
      Reply
      1. seasmogchan  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 67.0.3396.99(Google Chrome 67.0.3396.99)
        @神代綺凜 stylus可以导入stylish的样式吗？|´・ω・)ノ
        Reply
        1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 67.0.3396.99(Google Chrome 67.0.3396.99)
          @seasmogchan 一直都可以
          Reply
      2. Deeran  Windows 7 x64 Edition(Windows 7 x64 Edition) / Google Chrome 66.0.3359.181(Google Chrome 66.0.3359.181)
        @神代綺凜 我当时觉得推广这个插件是对的..(官方没给我费用 ) stylish强制更新然后覆盖全屏提示需要获取权限的时候我就知道这货是啥玩意了..
        Reply
        1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 67.0.3396.87(Google Chrome 67.0.3396.87)
          @Deeran 人人喊打
          Reply
  13. 油条  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 66.0.3359.181(Google Chrome 66.0.3359.181)
    B站有了新版页面，ヾ(≧∇≦*)ゝヾ(≧∇≦*)ゝ
    Reply
    1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 67.0.3396.87(Google Chrome 67.0.3396.87)
      @油条 哪儿？（不过要改什么也等考完试再说
      Reply
      1. 油条  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 66.0.3359.181(Google Chrome 66.0.3359.181)
        @神代綺凜 还在测试，现在可以用
        Reply
        1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 67.0.3396.87(Google Chrome 67.0.3396.87)
          @油条 有一种要推倒重写的不详预感
          Reply
          1. MingzZ  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 66.0.3359.181(Google Chrome 66.0.3359.181)
            @神代綺凜 视频播放界面右侧有个粉红“试用新版”按钮，变化确实很大
            Reply
  14. 洪荒之都  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 69.0.3464.0(Google Chrome 69.0.3464.0)
    不知道什么时候开始，网页里面背景图就加载不出来了，我重新安装也没用(´இ皿இ｀)
    Reply
    1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 67.0.3396.87(Google Chrome 67.0.3396.87)
      @洪荒之都 最近网络不知道什么原因，貌似都基本连不上Github，我背景图是放Github Page上面的，准备弄一个反代先暂时撑一下
      Reply
      1. AMD YES!  Windows 7 x64 Edition(Windows 7 x64 Edition) / Google Chrome 55.0.2883.87(Google Chrome 55.0.2883.87)
        @神代綺凜 可能是某些运营商有私墙，才连不上Github
        Reply
        1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 67.0.3396.99(Google Chrome 67.0.3396.99)
          @AMD YES! 不清楚，不过前阵子网络很差是真的，最近稍微好一点
          我把图片资源迁到coding了位于HK，现在已经不怕了
          Reply
          1. AMD YES!  Windows 7 x64 Edition(Windows 7 x64 Edition) / Google Chrome 55.0.2883.87(Google Chrome 55.0.2883.87)
            @神代綺凜 我当年就是被移动的私墙坑死，换了电信就好很多了OωO
            Reply
            1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 67.0.3396.99(Google Chrome 67.0.3396.99)
              @AMD YES! 按理来说移动的外网环境才是最好的吧
              Reply
              1. AMD YES!  Windows 7 x64 Edition(Windows 7 x64 Edition) / Google Chrome 55.0.2883.87(Google Chrome 55.0.2883.87)
                @神代綺凜 按理没用，实际体验才是对的
                Reply
  15. abc123xyz  GNU/Linux x64(GNU/Linux x64) / Mozilla Compatible(Mozilla Compatible)
    我是看ua的
    Reply
    1. 神代綺凜  Mac OS X(Mac OS X) / Safari(Safari)
      @abc123xyz
      Reply
  16. DeYong  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 66.0.3359.181(Google Chrome 66.0.3359.181)
    宽屏模式下再打开网页全屏下方还是空了，但不是空白
    Reply
    1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 66.0.3359.181(Google Chrome 66.0.3359.181)
      @DeYong 稍微修复了一下，不过没办法完全修好这个问题

      这是由于B站是用javascript控制弹幕列表里项的显示个数，控制成刚好能填满当前高度的弹幕列表，而这个个数只有用滚轮滚动时才会更新，因此当网页全屏或全屏时，弹幕列表高度发生了变化，但由于没有滚动所以显示项的数目不会更新，只有你滚动之后才会正常显示

      Reply
      1. DeYong  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 66.0.3359.181(Google Chrome 66.0.3359.181)
        @神代綺凜 辛苦你修复了，这次比上次空的更多了
        Reply
        1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 66.0.3359.181(Google Chrome 66.0.3359.181)
          @DeYong 空的更多了海星
          Reply
  17. 油条  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 66.0.3359.181(Google Chrome 66.0.3359.181)
    老哥求一个可以屏蔽首页右侧功能栏的代码，付一个自己的图http://p33paf58n.bkt.clouddn.com/1.jpg
    Reply
    1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 66.0.3359.181(Google Chrome 66.0.3359.181)
      @油条 你指的是右边那个板块指示器？
      Reply
  18. Deeran  Windows 7 x64 Edition(Windows 7 x64 Edition) / Google Chrome 66.0.3359.181(Google Chrome 66.0.3359.181)
    话说先感谢你的萌化 ,但是这17号更新后,我这用着就出BUG了,全屏模式下,右侧方会出现区域空白( 正好是个推荐页大小),望修复下.[还有个问题,你notes写的:开发者工具(F12)搜索"div#bofqi.scontent"这段,为啥我用了油猴脚本后按f12没找到这段呢?有按照你说的先关闭再开的].
    Reply
    1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 66.0.3359.181(Google Chrome 66.0.3359.181)
      @Deeran 刚刚去修复了，更新即可

      至于兼容那个设置，本来是针对按钮功能栏设置的，但是鉴于我目前一直拖更不知道什么时候能恢复所以这个兼容设置暂时已经不需要了，删掉了

      Reply
      1. Deeran  Windows 7 x64 Edition(Windows 7 x64 Edition) / Google Chrome 66.0.3359.181(Google Chrome 66.0.3359.181)
        @神代綺凜 不知道是不是Cent浏览器特色.还是出侧边栏BUG.现在我只能每次出BUG的时候停用再打开就好了.最后再次感谢~
        Reply
        1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 66.0.3359.181(Google Chrome 66.0.3359.181)
          @Deeran 看来是特色
          Reply
          1. Deeran  Windows 7 x64 Edition(Windows 7 x64 Edition) / Google Chrome 66.0.3359.181(Google Chrome 66.0.3359.181)
            @神代綺凜 机缘巧合之下,我去到了谷歌市场,下载了一个船新的插件---Stylus (对,不是Stylish),居然没八阿哥了... 特来反馈下...顺便提醒下后面的观众,出八阿哥都是Stylish的锅,不是作者的锅! 最后再次感谢你的萌化~~
            Reply
            1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 66.0.3359.181(Google Chrome 66.0.3359.181)
              @Deeran emmmm还有这种事么
              Reply
  19. seasmogchan  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 68.0.3434.0(Google Chrome 68.0.3434.0)
    发现一个小问题：网页全屏时侧边栏下方有一片区域空白。全屏时正常
    Reply
    1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 66.0.3359.181(Google Chrome 66.0.3359.181)
      @seasmogchan 已修复，更新即可
      Reply
  20. 青山  Windows 7 x64 Edition(Windows 7 x64 Edition) / Sogou Explorer(Sogou Explorer)
    视频看不了
    Reply
    1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 66.0.3359.181(Google Chrome 66.0.3359.181)
      @青山 之前不小心把hsts设置成全站了搞到这个资源也默认htttps了，找个时间搬到别的地方
      Reply