神代綺凜

[已完结] 哔哩哔哩 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折优惠码BWH26FXH3HIQ
年付$28CN2线路,1核/512M内存/10G硬盘/500GB@1Gbps【点击购买】(经常售罄,请抓紧机会)
年付$47CN2线路,1核/1G内存/20G硬盘/1T@1Gbps【点击购买
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

467 comments

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