神代綺凛

[已完结] 哔哩哔哩 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 64.0.3282.140(Google Chrome 64.0.3282.140)
      @咸鱼 那样的话要用Tampermonkey，我很懒而且自己也用不上所以不会去弄，不过如果你自己想尝试也不会很难弄
      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 64.0.3282.140(Google Chrome 64.0.3282.140)
          @咸鱼 本质都是javascript来的，实际上只要抄一下，让页面加载这段js就可以了
          emmm总之是需要一些js知识
          Reply
          1. 咸鱼  Windows 7 x64 Edition(Windows 7 x64 Edition) / Maxthon 5.1.5.2000(Maxthon 5.1.5.2000)
            @神代綺凜 编程基础之有小时候学竞赛学的pascal
            javascript能看懂能会修改一点,再上去就无力了
            Reply
            1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 64.0.3282.140(Google Chrome 64.0.3282.140)
              @咸鱼 主要是Tampermonkey的工作流程之类的……我也不好说因为我没有写过插件用的js脚本，虽然做肯定研究试一下一下就能弄出来，然而我懒，我自己用不上就不做了 ∠( ᐛ 」∠)＿
              Reply
              1. 咸鱼  Windows 7 x64 Edition(Windows 7 x64 Edition) / Maxthon 5.1.5.2000(Maxthon 5.1.5.2000)
                @神代綺凜 我也懒
                Reply
  2. Zero  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 64.0.3282.167(Google Chrome 64.0.3282.167)
    多久没更新了.jpg
    Reply
    1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 64.0.3282.140(Google Chrome 64.0.3282.140)
      @Zero 我也不想的
      Reply
  3. Eko  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 63.0.3239.108(Google Chrome 63.0.3239.108)
    从其他子页面点击导航栏的图片或者导航菜单中的'首页'回到首页的话,主题就失效了233
    Reply
    1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 63.0.3239.132(Google Chrome 63.0.3239.132)
      @Eko 噗，看了下是现在b站不管点什么链接跳转都会加一个类似?spm_id_from=xxxxx的GET参数
      以前是不会有的，正则表达式规则没有考虑这些……
      我改一下
      Reply
      1. Eko  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 63.0.3239.108(Google Chrome 63.0.3239.108)
        @神代綺凜 好吧,原来不止是点首页会这样..
        睿站那边要是经常搞这些没有什么实际意义的改动的话,博主的主题维护起来也会很头疼吧,辛苦了
        Reply
        1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 63.0.3239.132(Google Chrome 63.0.3239.132)
          @Eko 已经修复了|´・ω・)ノ
          是的……最近改动相当大，三天两头失效一个地方
          一般只是换了class或者id之类的还能接受，有些时候直接完全变了个结构，比如视频播放页面功能栏那块，样式还复杂，而且我都忘了我以前是怎么写的了（。
          Reply
  4. 日渐消瘦的大咸鱼  Windows 10 x64 Edition(Windows 10 x64 Edition) / uBrowser 6.2.3964.2(uBrowser 6.2.3964.2)
    紫罗兰无法正常收藏分享等类容全屏也没有右侧面板
    Reply
    1. 神代綺凜  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) / uBrowser 6.2.3964.2(uBrowser 6.2.3964.2)
        @神代綺凜 原来智能在原有的基础上修改或者删除，不能添加功能
        Reply
        1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 63.0.3239.132(Google Chrome 63.0.3239.132)
          @日渐消瘦的大咸鱼 是，css只能做到改变外观
          Reply
  5. 日渐消瘦的大咸鱼  Windows 10 x64 Edition(Windows 10 x64 Edition) / uBrowser 6.2.3964.2(uBrowser 6.2.3964.2)
    添加到收藏夹的位置不是居中，有的活动页面收藏夹无法显示或者位置超出了页面
    Reply
    1. 神代綺凜  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) / uBrowser 6.2.3964.2(uBrowser 6.2.3964.2)
        @神代綺凜 ok，不过修不修也没什么问题，是上一年的拜年祭
        Reply
  6. nix  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 63.0.3239.132(Google Chrome 63.0.3239.132)
    原来是图床炸了啊，今天发现b站和百度的背景图都没了，我还以为浏览器炸了呢
    Reply
    1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 63.0.3239.132(Google Chrome 63.0.3239.132)
      @nix 可以更新了
      Reply
    2. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 63.0.3239.132(Google Chrome 63.0.3239.132)
      @nix 是啊，我决定把图片资源都放自己的服务器上算了
      Reply
  7. 平行線  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 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 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 63.0.3239.132(Google Chrome 63.0.3239.132)
          @平行線 转移完了，更新样式即可
          Reply
  8. seasmogchan  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 64.0.3282.119(Google Chrome 64.0.3282.119)
    2月1号更新后，首页 视频播放页 稍后再看页面 导航栏都异常了
    Reply
    1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 63.0.3239.132(Google Chrome 63.0.3239.132)
      @seasmogchan 修复了，更新即可
      Reply
    2. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 63.0.3239.132(Google Chrome 63.0.3239.132)
      @seasmogchan 没有圆圈了是吗，这个问题我发现了，会修复
      Reply
      1. seasmogchan  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 64.0.3282.119(Google Chrome 64.0.3282.119)
        @神代綺凜 是的。而且位置感觉偏左了，没有居中
        Reply
        1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 63.0.3239.132(Google Chrome 63.0.3239.132)
          @seasmogchan 了解了
          Reply
  9. moe.C  Windows 10 x64 Edition(Windows 10 x64 Edition) / Vivaldi 1.94.1008.44(Vivaldi 1.94.1008.44)
    作者您好。关于最新版本仍有点小问题，视频页题头和UP主显示错行，希望能够修复。屏幕分辨率768p，感谢！
    Reply
    1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 63.0.3239.132(Google Chrome 63.0.3239.132)
      @moe.C 能提供一下出错的视频地址吗
      Reply
      1. moe.C  Windows 10 x64 Edition(Windows 10 x64 Edition) / Vivaldi 1.94.1008.44(Vivaldi 1.94.1008.44)
        @神代綺凜 https://www.bilibili.com/video/av18453741
        Reply
        1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 63.0.3239.132(Google Chrome 63.0.3239.132)
          @moe.C 多谢反馈
          Reply
        2. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 63.0.3239.132(Google Chrome 63.0.3239.132)
          @moe.C 现在应该修复了，看了半天发现是自己更新userstyle那边的时候漏改了一句代码，本地是好的云端是缺的
          Reply
  10. 小彦  Windows 7 x64 Edition(Windows 7 x64 Edition) / Firefox 49.0(Firefox 49.0)
    hi 博主，我看见你有自己原创的主题，有没有兴趣拿来出售呢？现在个站商店开发了代码市场功能，可以发布自己的代码，出售，以扫描二维码的形式收款。http://storeweb.cn/goods/browse
    Reply
    1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 63.0.3239.132(Google Chrome 63.0.3239.132)
      @小彦 嗯，不过这个主题是兴趣产物，免费
      Reply
  11. 沙扬娜拉  Windows 7 x64 Edition(Windows 7 x64 Edition) / Google Chrome 55.0.2883.87(Google Chrome 55.0.2883.87)
    头像是你吗？呵呵~moe~
    Reply
    1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 63.0.3239.132(Google Chrome 63.0.3239.132)
      @沙扬娜拉 头像是不笑猫的筒隐月子
      Reply
      1. 沙扬娜拉  Windows 7 x64 Edition(Windows 7 x64 Edition) / Google Chrome 55.0.2883.87(Google Chrome 55.0.2883.87)
        @神代綺凜 原来你在啊，你的回复会自动发我邮箱啊~
        Reply
        1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 63.0.3239.132(Google Chrome 63.0.3239.132)
          @沙扬娜拉 是的，评论会邮件提醒
          Reply
  12. 大大王  Windows 10 x64 Edition(Windows 10 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 63.0.3239.132(Google Chrome 63.0.3239.132)
      @大大王 Chevereto，一个开源免费的图床程序
      Reply
  13. summerlemon  Windows 7 x64 Edition(Windows 7 x64 Edition) / Google Chrome 62.0.3202.75(Google Chrome 62.0.3202.75)
    emmm~很棒哦！为什么这网址非HTTPS不可啊，难道你没有部署HTTPS么？
    Reply
    1. 神代綺凜  Mac OS X(Mac OS X) / Safari(Safari)
      @summerlemon ？抱歉我没懂什么意思
      Reply
      1. summerlemon  Windows 7 x64 Edition(Windows 7 x64 Edition) / Google Chrome 51.0.2704.106(Google Chrome 51.0.2704.106)
        @神代綺凜 就是说你这个评论框的输入网址非要在网址前面先输一个前缀HTTPS才可以发评论。。。。。
        Reply
        1. PrajnaSmoke  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 63.0.3239.108(Google Chrome 63.0.3239.108)
          @summerlemon 正常啊
          Reply
        2. 神代綺凜  Mac OS X(Mac OS X) / Safari(Safari)
          @summerlemon 应该是表单验证限制的。。。
          Reply
          1. PrajnaSmoke  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 63.0.3239.108(Google Chrome 63.0.3239.108)
            @神代綺凜 http地址表单测试~
            Reply
  14. 哆啦有个梦  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 55.0.2883.87(Google Chrome 55.0.2883.87)
    https://www.bilibili.com/bangumi/play/ep115371 加载不出背景
    Reply
    1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 62.0.3202.89(Google Chrome 62.0.3202.89)
      @哆啦有个梦 已修复，更新即可
      由于页面结构改了所以有些地方样式套用之后不是很好看还需要微调，目前期末有点忙所以没太多时间细改……等放假了会整体调整样式_(:3」∠)_
      Reply
      1. 哆啦有个梦  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 55.0.2883.87(Google Chrome 55.0.2883.87)
        @神代綺凜 已解决，谢谢
        Reply
  15. 哈哈哈  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 62.0.3202.94(Google Chrome 62.0.3202.94)
    老哥你这个worldpress主题可以给我吗
    Reply
    1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 62.0.3202.89(Google Chrome 62.0.3202.89)
      @哈哈哈 这是个Typecho的主题，不是WP的，而且是付费主题，需要的话看footer有作者主题网址
      Reply
  16. 夜之哀伤  Mac OS X 10.12.6(Mac OS X 10.12.6) / Safari 11.0.1(Safari 11.0.1)
    搜索结果的列表页上面的搜索框好小啊,能不能调大一些,辛苦了.
    Reply
    1. 神代綺凜  Mac OS X(Mac OS X) / Safari(Safari)
      @夜之哀伤 这个部分是准备大改的，由于最近学业繁忙所以没有时间大改，最多只会修复一些影响比较大的bug什么的……等放寒假的时候会彻底改一遍，还请先忍耐下
      Reply
  17. smogchan  Windows 10 x64 Edition(Windows 10 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 62.0.3202.89(Google Chrome 62.0.3202.89)
      @smogchan 23333只是调侃的说法啦，你能喜欢这个样式我就很开心了。以后当然也会一直做下去的
      Reply
  18. kissoul  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 62.0.3202.94(Google Chrome 62.0.3202.94)
    播放界面工具栏, 放左边
    有个问题, 会有一个透明的框遮住右边的视频5分之一
    同时还会遮住播放按钮, 弹幕选择, 弹幕颜色
    请修复一下
    Reply
    1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 62.0.3202.89(Google Chrome 62.0.3202.89)
      @kissoul 虽然是修复了但是由于我这个设计问题……当你将鼠标移出工具栏的时候需要移出超过那五分之一的距离之后，那部分才会脱离遮挡状态（实际上就是hover控制了下宽度
      Reply
      1. kissoul  Windows 10 x64 Edition(Windows 10 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 62.0.3202.89(Google Chrome 62.0.3202.89)
          @kissoul 行，我已经在设置里加了一项使用原版功能栏的选项了
          Reply
    2. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 62.0.3202.89(Google Chrome 62.0.3202.89)
      @kissoul 已修复，不好意思现在才看到这条评论，21号晚上我在赶实验报告所以没注意评论提醒
      Reply
  19. USHIO  Windows 7 x64 Edition(Windows 7 x64 Edition) / Firefox 57.0(Firefox 57.0)
    背景没有图片一片空白怎么办？
    Reply
    1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 62.0.3202.89(Google Chrome 62.0.3202.89)
      @USHIO 试一下你是否能打开这个图片
      如果可以的话就有可能是你无意中在自定义选项中开启了“使用自定义背景图片”，而且选择的还是无背景
      Reply
      1. USHIO  Windows 7 x64 Edition(Windows 7 x64 Edition) / Firefox 57.0(Firefox 57.0)
        @神代綺凜 能打开，但是怎么解决呢
        Reply
        1. USHIO  Windows 7 x64 Edition(Windows 7 x64 Edition) / Firefox 57.0(Firefox 57.0)
          @USHIO 打开了这个图片之后刷新一下背景图就出来了
          Reply
          1. 神代綺凜  Mac OS X(Mac OS X) / Safari(Safari)
            @USHIO 挺迷的
            Reply
  20. 飞翔的企鹅  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 55.0.2883.87(Google Chrome 55.0.2883.87)
    艹猫背景图好评
    Reply
    1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 62.0.3202.89(Google Chrome 62.0.3202.89)
      @飞翔的企鹅 是艹猫真爱粉
      Reply
      1. 飞翔的企鹅  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 55.0.2883.87(Google Chrome 55.0.2883.87)
        @神代綺凜 原来如此
        Reply