神代綺凛

[已完结] 哔哩哔哩 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. 咸鱼  Windows 7 x64 Edition(Windows 7 x64 Edition) / Maxthon 5.1.5.2000(Maxthon 5.1.5.2000)
    视频播放页如果往下拉看评论的话会有白色的部分升起挡住背景艹猫的图片
    Reply
    1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 65.0.3325.162(Google Chrome 65.0.3325.162)
      @咸鱼 能不能提供一下浏览器和你发现有错误的视频地址？
      Reply
      1. 咸鱼  Windows 7 x64 Edition(Windows 7 x64 Edition) / Maxthon 5.1.5.2000(Maxthon 5.1.5.2000)
        @神代綺凜 遨游,我觉得是浏览器内核的问题.
        所有视频都这样,主页没有问题
        还有上次那个排行变到第二行的被我 padding: -1px 30px 0px 30px !important; 第一个数据改成负数就行了,但是整体有点跑到边框外面了
        Reply
        1. 神代綺凜  Mac OS X(Mac OS X) / Safari(Safari)
          @咸鱼 建议还是用chrome（
          Reply
          1. 咸鱼  Windows 7 x64 Edition(Windows 7 x64 Edition) / Maxthon 5.1.5.2000(Maxthon 5.1.5.2000)
            @神代綺凜 有时候用习惯了就再也回不来了
            青春也是这样
            Reply
            1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 65.0.3325.162(Google Chrome 65.0.3325.162)
              @咸鱼
              Reply
  2. seasmogchan  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 65.0.3325.181(Google Chrome 65.0.3325.181)
    4月1日出来个古文模式，不过样式中看不到这个开关按钮。不过也不清楚这个模式是否一直会有，先观望一天。如果是以后都有的话，希望能弄出来φ(￣∇￣o)
    Reply
    1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 65.0.3325.162(Google Chrome 65.0.3325.162)
      @seasmogchan 古文模式在哪里……为啥我关了样式也看不到
      Reply
      1. seasmogchan  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 65.0.3325.181(Google Chrome 65.0.3325.181)
        @神代綺凜 看来就是个愚人节彩蛋而已
        Reply
        1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 65.0.3325.162(Google Chrome 65.0.3325.162)
          @seasmogchan
          Reply
  3. 广树  Windows 7 x64 Edition(Windows 7 x64 Edition) / Google Chrome 65.0.3325.181(Google Chrome 65.0.3325.181)
    哇，这个好棒！感觉自己弱爆了￣﹃￣
    Reply
  4. lain  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 65.0.3325.146(Google Chrome 65.0.3325.146)
    看到更新日志有FGO，安卓的能PY吗
    Reply
    1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 65.0.3325.162(Google Chrome 65.0.3325.162)
      @lain 我是日服的噢 OωO
      Reply
      1. lain  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 65.0.3325.146(Google Chrome 65.0.3325.146)
        @神代綺凜 最遥远的距离，我还差一年就能赶上你的脚步了
        Reply
        1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 65.0.3325.162(Google Chrome 65.0.3325.162)
          @lain
          Reply
  5. 乐馗  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 65.0.3325.162(Google Chrome 65.0.3325.162)
    大佬，有的视频播放页面硬币、收藏和up主信息栏背景是白色的同时，右侧的蓝色功能按钮也不显示。求解决！
    Reply
    1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 64.0.3282.140(Google Chrome 64.0.3282.140)
      @乐馗 修复了，更新即可
      按钮问题学业原因暂时拖更
      Reply
  6. 司来吉兰丷  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 65.0.3325.162(Google Chrome 65.0.3325.162)
    大佬，视频播放页面硬币、收藏和up主信息栏背景是白色的
    Reply
    1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 64.0.3282.140(Google Chrome 64.0.3282.140)
      @司来吉兰丷 修复了，更新即可
      Reply
    2. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 64.0.3282.140(Google Chrome 64.0.3282.140)
      @司来吉兰丷 了解
      Reply
  7. 夜风  Windows 7 x64 Edition(Windows 7 x64 Edition) / Google Chrome 64.0.3282.140(Google Chrome 64.0.3282.140)
    匹配规则可能有些问题了，好多视频播放界面都不能正确的应用
    Reply
    1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 64.0.3282.140(Google Chrome 64.0.3282.140)
      @夜风 修复了，更新即可
      Reply
    2. 神代綺凜  Mac OS X(Mac OS X) / Safari(Safari)
      @夜风 是因为b站新版视频页面html结构不一样了
      Reply
  8. geralt  Windows 7 x64 Edition(Windows 7 x64 Edition) / Sogou Explorer(Sogou Explorer)
    天哪你的网页做的真是太HUAluo好QIAOli了
    Reply
    1. 神代綺凜  Windows 7(Windows 7) / Google Chrome 65.0.3325.162(Google Chrome 65.0.3325.162)
      @geralt 过奖了
      Reply
  9. 无花无酒  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 64.0.3282.140(Google Chrome 64.0.3282.140)
    什么时候支持下新番时刻表页面
    Reply
    1. 神代綺凜  Windows 7(Windows 7) / Google Chrome 65.0.3325.162(Google Chrome 65.0.3325.162)
      @无花无酒 这个问题等同于“我的神船什么时候能修好”
      Reply
      1. 无花无酒  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 64.0.3282.140(Google Chrome 64.0.3282.140)
        @神代綺凜 恩，你的回复速度也太强了吧
        Reply
        1. 神代綺凜  Windows 7(Windows 7) / Google Chrome 65.0.3325.162(Google Chrome 65.0.3325.162)
          @无花无酒 有空的时候就会秒回了
          Reply
  10. 境界的彼方  Windows 8.1 x64 Edition(Windows 8.1 x64 Edition) / Google Chrome 63.0.3239.132(Google Chrome 63.0.3239.132)
    恩，好的，麻烦了
    Reply
    1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 64.0.3282.140(Google Chrome 64.0.3282.140)
      @境界的彼方 修复了，更新即可
      Reply
      1. 境界的彼方  Windows 8.1 x64 Edition(Windows 8.1 x64 Edition) / Google Chrome 63.0.3239.132(Google Chrome 63.0.3239.132)
        @神代綺凜 恩，已经好了，辛苦了大佬|´・ω・)ノ
        Reply
  11. 境界的彼方  Windows 8.1 x64 Edition(Windows 8.1 x64 Edition) / Google Chrome 63.0.3239.132(Google Chrome 63.0.3239.132)
    大佬，视频名称下和UP简介下的长条广告似乎没有去除，并且有那种广告的视频中，视频标题与up信息部分，背景显示不完全。不知能否修复
    Reply
    1. 神代綺凜  Windows 7(Windows 7) / Google Chrome 65.0.3325.162(Google Chrome 65.0.3325.162)
      @境界的彼方 那应该是新的视频页面结构了
      了解了，等电脑修好了我才能修……
      Reply
  12. 图安  Windows 10 x64 Edition(Windows 10 x64 Edition) / Firefox 58.0(Firefox 58.0)
    大佬大佬 请问那个给网页添加音乐的代码 可以让我用下吗|´・ω・)ノ不知能否发一下吗
    Reply
    1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Microsoft Edge 16.16299(Microsoft Edge 16.16299)
      @图安 说的是博客顶部的音乐播放器？那个是主题带的，并没有独立的代码
      Reply
  13. 乡下来的喵  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 64.0.3282.186(Google Chrome 64.0.3282.186)
    首页上边的导航，广场和直播下面的那个框，跑屏幕外面去了。
    建议改成右对齐=￣ω￣=

    #primary_menu .side-nav .square-wrap,#primary_menu .side-nav .nav-live{
    right: 0;
    left: auto;
}
    Reply
    1. 神代綺凜  Mac OS X(Mac OS X) / Safari(Safari)
      @乡下来的喵 我是有这样改的，不过仅限于低宽度的情况
      一般情况下不会有宽度不够展现并且还没触发低宽度自适应布局的情况，因此我还是保持了向右
      不过既然这么说，我到时候再找到临界点去改吧
      Reply
      1. 乡下来的喵  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 64.0.3282.186(Google Chrome 64.0.3282.186)
        @神代綺凜 我的分辨率是3000*2000，系统缩放200%，可能是这个不一般的长宽比，导致出现了不一般的情况。(/ω＼)
        Reply
        1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 64.0.3282.140(Google Chrome 64.0.3282.140)
          @乡下来的喵 这个问题解决了，你可以更新看看，顺便修复了很多显示问题
          Reply
  14. seasmogchan  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 65.0.3325.146(Google Chrome 65.0.3325.146)
    你好！在某些视频页面下右侧的按键会无法正常显示。例如av20448584 av20458413。你能找出是哪个元素导致的吗？虽然不影响使用φ(￣∇￣o)
    Reply
    1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 64.0.3282.140(Google Chrome 64.0.3282.140)
      @seasmogchan 你说的无法正常显示应该指的是按照原始的样子显示吧，这个是因为按钮那部分的结构改了，而且因为过于复杂需要花一点精力来弄，目前因学业这个问题暂时拖更（
      Reply
    2. 神代綺凜  Mac OS X(Mac OS X) / Safari(Safari)
      @seasmogchan 等电脑修好了我再看。。目前无能为力_(:3」∠)_
      Reply
  15. False  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 64.0.3282.186(Google Chrome 64.0.3282.186)
    我是自定义背景的，鼠标移到动态那个地方，显示的窗口会有一张背景图，不知道为什么会这样。
    就是大会员、消息什么的都不会有那个背景图，而且背景图比那个窗口大一圈。好像刚开始装的没有，然后不知道怎么就有了。
    文字描述起来好复杂。
    Reply
    1. 神代綺凜  Mac OS X(Mac OS X) / Safari(Safari)
      @False 懂意思，我最近电脑去世了正在返厂维修_(:3」∠)_
      等电脑复活了我再看
      Reply
      1. False  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 64.0.3282.186(Google Chrome 64.0.3282.186)
        @神代綺凜 解决了。
        原因：动态用的是iframe嵌套HTML，嵌套的HTML里也有一个body标签，你的代码给所有的body加上了background属性。
        临时解决办法（因为message.bilibili.com的lang也是zh-CN，所以网页背景也会没掉）：因为嵌套的HTML的lang是zh-CN，所以可以为嵌套的HTML单独设置一个background：none。
        body:lang(zh-CN){
        background-image: none !important;
        }
        要是有什么更好的办法记得告诉我。
        Reply
        1. 神代綺凜  Mac OS X(Mac OS X) / Safari(Safari)
          @False 是，我是直接找出iframe的url然后用正则表达式控制指定url的背景为透明
          Reply
          1. False  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 64.0.3282.186(Google Chrome 64.0.3282.186)
            @神代綺凜 果然有经验的和我这种新手的思考方式是不一样的。(〃'▽'〃)
            Reply
            1. 神代綺凜  Mac OS X(Mac OS X) / Safari(Safari)
              @False （ﾉ´д｀）倒也不是，只是stylish本来就有这种操作而已
              Reply
              1. False  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 64.0.3282.186(Google Chrome 64.0.3282.186)
                @神代綺凜 反正你的动态那块的代码貌似失效了，坐等更新。
                Reply
                1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 64.0.3282.140(Google Chrome 64.0.3282.140)
                  @False 修复了，更新即可
                  Reply
  16. True  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 64.0.3282.167(Google Chrome 64.0.3282.167)
    逛街中，你服务器是在国外么，有点慢。
    Reply
    1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 64.0.3282.140(Google Chrome 64.0.3282.140)
      @True 你的网站怎么502了
      Reply
    2. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 64.0.3282.140(Google Chrome 64.0.3282.140)
      @True 我服务器前阵子去美国旅游了，估计三月中旬才能回来
      你试着TCP80端口跟踪下路由就知道了
      Reply
  17. 熊猫小A  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 63.0.3239.132(Google Chrome 63.0.3239.132)
    效果很棒嘛~
    另外大佬的主题改得很好看
    Reply
    1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 64.0.3282.140(Google Chrome 64.0.3282.140)
      @熊猫小A 谢谢
      Reply
  18. Zero  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 64.0.3282.167(Google Chrome 64.0.3282.167)
    博客迁回阿里云，因为换了新域名要备案，所以。。。。emmm，短暂失联2333333
    Reply
    1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 64.0.3282.140(Google Chrome 64.0.3282.140)
      @Zero
      Reply
  19. ushio  Windows 7 x64 Edition(Windows 7 x64 Edition) / Google Chrome 62.0.3202.94(Google Chrome 62.0.3202.94)
    大佬图床是不是又炸了，今天早上显示不出来＞﹏＜
    Reply
    1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 64.0.3282.140(Google Chrome 64.0.3282.140)
      @ushio 我放图片资源的主机搬迁了然后解析忘了改了
      现在已经更新了DNS记录，大概需要20分钟生效
      Reply
      1. ushio  Windows 7 x64 Edition(Windows 7 x64 Edition) / Google Chrome 62.0.3202.94(Google Chrome 62.0.3202.94)
        @神代綺凜 好了，感谢(ฅ´ω`ฅ)
        Reply
  20. 咸鱼  Windows 7 x64 Edition(Windows 7 x64 Edition) / Maxthon 5.1.5.2000(Maxthon 5.1.5.2000)
    主站首页的每个栏目的排行板块好像是因为太大或者是"有新动态最新投稿"板块太大导致排行板块被挤到第二层右边去了. 还能抢救一下吗?换行导致一大块白白空白这样已经好久了
    Reply
    1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 64.0.3282.140(Google Chrome 64.0.3282.140)
      @咸鱼 我这里没有出现这种现象，能否提供一下用的浏览器之类的信息
      Reply
      1. 咸鱼  Windows 7 x64 Edition(Windows 7 x64 Edition) / Maxthon 5.1.5.2000(Maxthon 5.1.5.2000)
        @神代綺凜 傲游浏览器
        Version: 5.1.5.2000
        OS: 6.1.7601.Service Pack 1
        IE: 11.0.9600.18920
        Reply
        1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 64.0.3282.140(Google Chrome 64.0.3282.140)
          @咸鱼 傲游……估计是因为内核不太一样导致css样式的表现有差异，国产双核浏览器经常有这种问题
          我手头只能保证chrome、360极速是正常的，其他浏览器我不用也不会为了去兼容而特地下下来debug 毕竟这种东西要是要照顾所有的浏览器太难了
          Reply
          1. 咸鱼  Windows 7 x64 Edition(Windows 7 x64 Edition) / Maxthon 5.1.5.2000(Maxthon 5.1.5.2000)
            @神代綺凜 啊,确实.我最近发现很多脚本都和傲游浏览器不兼容.这浏览器真的是哪里都搞特殊,很难受.
            不过从小用到大不想换了,能忍则忍吧._(:зゝ∠)_
            Reply