神代綺凛

[已完结] 哔哩哔哩 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
年付$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. geralt  Windows 7 x64 Edition(Windows 7 x64 Edition) / Sogou Explorer(Sogou Explorer)
    天哪你的网页做的真是太HUAluo好QIAOli了
    1. 神代綺凜  Windows 7(Windows 7) / Google Chrome 65.0.3325.162(Google Chrome 65.0.3325.162)
      @geralt 过奖了
  2. 无花无酒  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 64.0.3282.140(Google Chrome 64.0.3282.140)
    什么时候支持下新番时刻表页面
    1. 神代綺凜  Windows 7(Windows 7) / Google Chrome 65.0.3325.162(Google Chrome 65.0.3325.162)
      @无花无酒 这个问题等同于“我的神船什么时候能修好”
      1. 无花无酒  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 64.0.3282.140(Google Chrome 64.0.3282.140)
        @神代綺凜 恩,你的回复速度也太强了吧
        1. 神代綺凜  Windows 7(Windows 7) / Google Chrome 65.0.3325.162(Google Chrome 65.0.3325.162)
          @无花无酒 有空的时候就会秒回了
  3. 境界的彼方  Windows 8.1 x64 Edition(Windows 8.1 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 8.1 x64 Edition(Windows 8.1 x64 Edition) / Google Chrome 63.0.3239.132(Google Chrome 63.0.3239.132)
        @神代綺凜 恩,已经好了,辛苦了大佬|´・ω・)ノ
  4. 境界的彼方  Windows 8.1 x64 Edition(Windows 8.1 x64 Edition) / Google Chrome 63.0.3239.132(Google Chrome 63.0.3239.132)
    大佬,视频名称下和UP简介下的长条广告似乎没有去除,并且有那种广告的视频中,视频标题与up信息部分,背景显示不完全。不知能否修复
    1. 神代綺凜  Windows 7(Windows 7) / Google Chrome 65.0.3325.162(Google Chrome 65.0.3325.162)
      @境界的彼方 那应该是新的视频页面结构了
      了解了,等电脑修好了我才能修……
  5. 图安  Windows 10 x64 Edition(Windows 10 x64 Edition) / Firefox 58.0(Firefox 58.0)
    大佬大佬 请问那个给网页添加音乐的代码 可以让我用下吗|´・ω・)ノ不知能否发一下吗
    1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Microsoft Edge 16.16299(Microsoft Edge 16.16299)
      @图安 说的是博客顶部的音乐播放器?那个是主题带的,并没有独立的代码
  6. 乡下来的喵  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;
    }
    1. 神代綺凜  Mac OS X(Mac OS X) / Safari(Safari)
      @乡下来的喵 我是有这样改的,不过仅限于低宽度的情况
      一般情况下不会有宽度不够展现并且还没触发低宽度自适应布局的情况,因此我还是保持了向右
      不过既然这么说,我到时候再找到临界点去改吧
      1. 乡下来的喵  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 64.0.3282.186(Google Chrome 64.0.3282.186)
        @神代綺凜 我的分辨率是3000*2000,系统缩放200%,可能是这个不一般的长宽比,导致出现了不一般的情况。(/ω\)
        1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 64.0.3282.140(Google Chrome 64.0.3282.140)
          @乡下来的喵 这个问题解决了,你可以更新看看,顺便修复了很多显示问题
  7. seasmogchan  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 65.0.3325.146(Google Chrome 65.0.3325.146)
    你好!在某些视频页面下右侧的按键会无法正常显示。例如av20448584 av20458413。你能找出是哪个元素导致的吗?虽然不影响使用φ( ̄∇ ̄o)
    1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 64.0.3282.140(Google Chrome 64.0.3282.140)
      @seasmogchan 你说的无法正常显示应该指的是按照原始的样子显示吧,这个是因为按钮那部分的结构改了,而且因为过于复杂需要花一点精力来弄,目前因学业这个问题暂时拖更(
    2. 神代綺凜  Mac OS X(Mac OS X) / Safari(Safari)
      @seasmogchan 等电脑修好了我再看。。目前无能为力_(:3」∠)_
  8. False  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 64.0.3282.186(Google Chrome 64.0.3282.186)
    我是自定义背景的,鼠标移到动态那个地方,显示的窗口会有一张背景图,不知道为什么会这样。
    就是大会员、消息什么的都不会有那个背景图,而且背景图比那个窗口大一圈。好像刚开始装的没有,然后不知道怎么就有了。
    文字描述起来好复杂。
    1. 神代綺凜  Mac OS X(Mac OS X) / Safari(Safari)
      @False 懂意思,我最近电脑去世了正在返厂维修_(:3」∠)_
      等电脑复活了我再看
      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;
        }
        要是有什么更好的办法记得告诉我。
        1. 神代綺凜  Mac OS X(Mac OS X) / Safari(Safari)
          @False 是,我是直接找出iframe的url然后用正则表达式控制指定url的背景为透明
          1. False  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 64.0.3282.186(Google Chrome 64.0.3282.186)
            @神代綺凜 果然有经验的和我这种新手的思考方式是不一样的。(〃'▽'〃)
            1. 神代綺凜  Mac OS X(Mac OS X) / Safari(Safari)
              @False (ノ´д`)倒也不是,只是stylish本来就有这种操作而已
              1. False  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 64.0.3282.186(Google Chrome 64.0.3282.186)
                @神代綺凜 反正你的动态那块的代码貌似失效了,坐等更新。
                1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 64.0.3282.140(Google Chrome 64.0.3282.140)
                  @False 修复了,更新即可
  9. True  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 64.0.3282.167(Google Chrome 64.0.3282.167)
    逛街中,你服务器是在国外么,有点慢。
    1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 64.0.3282.140(Google Chrome 64.0.3282.140)
      @True 你的网站怎么502了
    2. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 64.0.3282.140(Google Chrome 64.0.3282.140)
      @True 我服务器前阵子去美国旅游了,估计三月中旬才能回来
      你试着TCP80端口跟踪下路由就知道了
  10. 熊猫小A  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)
      @熊猫小A 谢谢
  11. Zero  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 64.0.3282.167(Google Chrome 64.0.3282.167)
    博客迁回阿里云,因为换了新域名要备案,所以。。。。emmm,短暂失联2333333
    1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 64.0.3282.140(Google Chrome 64.0.3282.140)
  12. ushio  Windows 7 x64 Edition(Windows 7 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 64.0.3282.140(Google Chrome 64.0.3282.140)
      @ushio 我放图片资源的主机搬迁了然后解析忘了改了
      现在已经更新了DNS记录,大概需要20分钟生效
      1. ushio  Windows 7 x64 Edition(Windows 7 x64 Edition) / Google Chrome 62.0.3202.94(Google Chrome 62.0.3202.94)
        @神代綺凜 好了,感谢(ฅ´ω`ฅ)
  13. 咸鱼  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)
      @咸鱼 我这里没有出现这种现象,能否提供一下用的浏览器之类的信息
      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
        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 毕竟这种东西要是要照顾所有的浏览器太难了
          1. 咸鱼  Windows 7 x64 Edition(Windows 7 x64 Edition) / Maxthon 5.1.5.2000(Maxthon 5.1.5.2000)
            @神代綺凜 啊,确实.我最近发现很多脚本都和傲游浏览器不兼容.这浏览器真的是哪里都搞特殊,很难受.
            不过从小用到大不想换了,能忍则忍吧._(:зゝ∠)_
  14. 咸鱼  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)
                @神代綺凜 我也懒
  15. 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 我也不想的
  16. 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之类的还能接受,有些时候直接完全变了个结构,比如视频播放页面功能栏那块,样式还复杂,而且我都忘了我以前是怎么写的了(。
  17. 日渐消瘦的大咸鱼  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只能做到改变外观
  18. 日渐消瘦的大咸鱼  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,不过修不修也没什么问题,是上一年的拜年祭
  19. 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 是啊,我决定把图片资源都放自己的服务器上算了
  20. 平行線  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)
          @平行線 转移完了,更新样式即可