Bitcron主题「皿」

Bitcron主题「皿」

!Warning
 特别声明：本博客公开的所有模板及其源代码，一律禁止肖战团队及其粉丝使用。

「皿」效果图
「皿」效果图

「皿」效果图
「皿」效果图

项目 说明
主题 皿
英文（罗马音） Sara
说明 这里
源码 这里
属性 开源

关于「皿」

我永远喜欢皿三昧（さらざんまい）！！正好动画完结当天我就在写这个主题……完结撒花！呜呜呜呜我永远喜欢几原监督！不行一想到皿最后两话我又tm泪流成河……

很多效果来自さらざんまい官网，不过在小海龙的帮助下我们做了更好的实现，代码整理得更简洁啦～

也是我第一次写这么复杂的一个主题，包括Loading页和基础样式和页面逻辑基本都是自己重构了一遍，可以说是从头开始写一个新主题了，太不容易了……改得我头晕脑胀。

几乎所有动效、特别的悬停效果都是小海龙手把手教我写的（……）包括给我解释皿官网那个旋转偏移的原理，还有红线部分的动效实现，还有齐头尾的悬停效果，总之没有小海龙就没有这个主题，向他致以最高的敬意！小海龙NB！

「皿」的特点：

  • 特别好看的随滚动fade up的样式，来自开源项目AOS，是小海龙找到并推荐的一个项目，贼吉尔好用；
  • 添加Loading页面，再也不用看着图片一点点加载出来了（？）；
  • 除了文章正文以外的内容全部被设置为了不可选中，对像我这样的浏览网页中特别喜欢拖动选区的用户非常友好；
  • 页面底部设置博主简单简介，About页没人看也没关系啦（问题发言）；
  • 重构文章内部样式，用了更纤细更优雅的字体（思源宋体Light），更适合文字博主，还写了个骚包的加粗样式，像这样，底下有个漂亮的波浪线，本来这个波浪线应该用text-decoration实现的，但是Chrome浏览器疑似对wavy样式的下划线支持有问题，于是曲线救国改用了Background的方法来实现；
  • 整合归档页和分类页，写到同一个页面里去了。

总之我超喜欢这个主题的……感谢小海龙感谢不知名的写皿官网的程序员，这位程序员应该被甲方改了好多次需求所以网站上有好多没用上的js，辛苦了，お疲れ様。

学到了好多Tricky的CSS技巧，以后有时间了再写文章总结一下。

一些特殊功能

保留了之前小海龙写的特殊功能的脚本，还加了个新功能。

折叠

{{スタンドバイミー}}
 スタンドバイミー　お願い
 僕は　僕は　強くなれるのかな
 君が今ここにいなくても
 手を伸ばす自信をくれよ
 スタンドバイユー　お願い
 何もかもを取っ払ってしまいたい
 涙が雨にさらわれてく
 君の熱に抱かれたいだけなんだ

写法如下，两个花括号中间的内容是{{折叠提示}}，注意不要有空行，空行即表示折叠段落结束。 

{{スタンドバイミー}}
スタンドバイミー　お願い
僕は　僕は　強くなれるのかな
君が今ここにいなくても
手を伸ばす自信をくれよ
スタンドバイユー　お願い
何もかもを取っ払ってしまいたい
涙が雨にさらわれてく
君の熱に抱かれたいだけなんだ

预警

!Warning
 文前预警，不过其实就是加个样式而已，样式怎么样可以自己定义

写法如下，同样没有空行： 

!Warning
文前预警，不过其实就是加个样式而已，样式怎么样可以自己定义

未完待续标记NEW!

新功能！适用于我这种经常文没写完就存不住要发出来的，也适用于写系列文章的博主们。

在文章的metadata区加入tbc: yes，文章结尾的“End.”字样会变为“未完待续”字样，示范文章可以看这篇的末尾样式：古川知宏（监督）、樋口达人（系列构成）、中村彼方（作词家）之集结！TV动画《少女☆歌剧 Revue Starlight》放送完结长篇访谈（前篇）

未完待续效果
未完待续效果

嗯？你还不知道什么是metadata？来看看Hepo这篇关于Bitcron的解释吧：Meta支持

实在看不懂的话，只要在文章最开始正文前、文档的第一行加上tbc: yes就可以啦。

对的，tbc就是To Be Continued。

自定义文章摘要NEW!

新功能！其实也就加了两行。

在文章的metadata区加入summary: [文章简介内容]，在主页文章列表就会展示出summary里填写的内容，比如我《陈塔无差｜涸辙》的meta区是这么写的： 

---
Title: 陈塔无差｜涸辙
date: 2019-07-20
summary: 塔露拉背着手，往后退了一步，无力地说，可我想你好好活着。<br />陈看着塔露拉转身要走，牙一咬心一横喊道，我想救你，这都不行吗？<br />塔露拉脚步一顿，可终于没有回头。<br />她说，陈，你已经救过我了，所以，这次放我走吧。
tags: 同人, 明日方舟, 陈塔
status: public
---

显示出来就是这样：

Summary效果
Summary效果

更新日志

  • 2019-07-23 添加文章摘要自定义功能
  • 2019-07-01 ping了一下Google Fonts和科大镜像，发现可能还是Google Fonts快点儿，跟小海龙商量了一下觉得Google Fonts的问题在于地区不同可能很快可能很慢……Self Hold看了一下不靠谱，最后结论是就这么挂着吧管它死活，大家上不来的搭个梯凑合了（……）；另外更新了小海龙写的js，用于适配B站iframe框架实现16:9显示；更新了代码部分的字体和高亮配色
  • 2019-06-25 修正移动端适配样式
  • 2019-06-24 更新Footer样式
  • 2019-06-23 将Google Fonts替换为科大镜像，加快国内访问速度（还访问不上请爬梯……）
  • 2019-06-22 发布主题
  • 2019-06-20 开始肝主题

使用方法

在Github上下载源代码，然后把template放到你的根目录下就好了～

如果根目录下已有template文件夹，请删除后直接覆盖ww

鸣谢

  • 小海龙←太万能了，抱紧小海龙的大腿，前端百科全书，传帮带一流人才就是我们小海龙！
  • 水八口←虽然这次的样式都是自己重构的但是评论的样式结果还是抄的Baco的，不得不说这个评论样式真的太好用了……感谢Baco把它开源了呜呜呜。
  • 几原邦彦（笑）
  • 斑马线君←虽然源码里没有斑马但是我用这个主题配合的头图是斑马画的！太好康了！神仙画画！我疯狂流泪感谢斑马授权给我用呜呜呜呜，有了头图后站子一下就像个正经网站了（问题发言）。

我的主题集

矩阵良的Bitcron主题集

- End -
自制
Bitcron主题 花式折腾
2,036字 787次阅读
Comments
Write a Comment
  • cbsc reply
    2019-06-23 01:20:18

    主题好炫酷，只是似乎在移动版浏览器上载入有问题，一直在转圈。

    • 古川政良 reply
      2019-06-23 01:22:52

      @cbsc 初次访问要等移动端加载好全部图片loading才会消失，所以会慢一点……

      可以找个纯文本的文章试一试，很快就出现了（我就正在移动端打回复……）

      • cbsc reply
        2019-06-23 01:25:10

        @古川政良 访问首页时就一直在转圈啊，这个需要优化下。我用的时ios下的opera touch

        • 古川政良 reply
          2019-06-23 01:27:23

          @cbsc 首页在转多半是因为我的header图太大了（……）是个超高清大图，斑马画的真的hin好看我权衡了一下决定还是不压缩它（……）大家各拼网速拉倒（草我果然是个颜狗）

          • cbsc reply
            2019-06-23 01:29:27

            @古川政良 适当压缩下图片，肉眼看起来差别也不是很大嘛

            • 古川政良 reply
              2019-06-23 01:35:01

              @cbsc 最近好像看到了一个无损压缩图片的项目，等白天我研究一下看能不能无损压到小几M（……）另外爬梯子好像可以显著加快加载，可能是因为我节点挂在日本节点了（……）

              • cbsc reply
                2019-06-23 01:39:10

                @古川政良 一直想吐槽，你的网站初次访问真的很慢哦，为何要挂到日本节点呢？

                • 古川政良 reply
                  2019-06-23 01:42:08

                  @cbsc 香港节点贵啊！然后我自己平时就挂着日本的梯子（……毕竟要刷推肝日服手游）所以为了自己访问方便就——（被打飞）

                  我压缩啦，现在头图只有300多k了应该加载起来快了吧……

                  • cbsc reply
                    2019-06-23 01:44:27

                    @古川政良 我用美国节点挺好，比你这个快，当然我的主题也和你的不一样。你目前的状况时要自绝于国人了啊

                    • 古川政良 reply
                      2019-06-23 01:53:33

                      @cbsc 你主题很简单嘛啥动态资源都没有……什么叫自绝于国人，国内小伙伴还是能上来的嘛！！而且看我博客的大部分都是阿宅，哪个阿宅没有个需要架梯到日服的手游要打，这叫因地制宜（理不直气也壮.jpg）

                      • cbsc reply
                        2019-06-23 01:56:51

                        @古川政良 不服不行，且早睡觉！改天您能移植点其他平台优秀主题嘛

                        • 古川政良 reply
                          2019-06-23 01:59:18

                          @cbsc 我还在回味皿三昧最后两话睡不着（惊天大草）…………首先我就没怎么用过其他平台（一到要自己处理后端的平台就开始烦躁，最后爬到了Bitcron才安定下来）

                          然后你有想移植的主题吗我可以康一康，说不定有空就搞了（？）移植还是比自己从头写要简单我觉得

                          • cbsc reply
                            2019-06-23 02:00:53

                            @古川政良 要是你有空，那真是我的好运气啊了哈哈，改天再劳烦你！

                            • 古川政良 reply
                              2019-06-23 02:25:13

                              @cbsc 好呀23333反正毕业以后也是疯狂想摸鱼的时期（……）

            • 古川政良 reply
              2019-06-23 14:52:43

              @cbsc 草，我好像知道国内为什么访问慢了，因为加载了Google Fonts，我给换成科大镜像后国内访问就好多了……你试试【

              • cbsc reply
                2019-06-23 15:26:24

                @古川政良 马后炮地表示，以前确实觉得是这个原因。不过现在载入首页依然因为图片的原因要转十几秒的圈圈。

                • 古川政良 reply
                  2019-06-23 19:37:07

                  @cbsc 怎么会十几秒……我下了梯子清了缓存重新试了一下也就五秒左右…………（摸下巴）不应该啊……

                  • cbsc reply
                    2019-06-23 20:08:07

                    @古川政良 刚测试了下，速度可以了

                    • 古川政良 reply
                      2019-06-23 20:26:01

                      @cbsc 那就行了，暂时不折腾了（……）

  • 水八口 reply
    2019-06-23 15:11:36

    来撒花庆祝一下！（我竟然也拥有了姓名？？？）

    • 古川政良 reply
      2019-06-23 19:36:05

      @水八口 ……我的哪个主题你没有姓名！！

  • 小F reply
    2019-06-27 19:02:29

    加载的效果、图片多打开速度肯定有影响，这有什么……除非一个网页loading了十几分钟都出不来不然我是不会放弃打开的！

    话说这个主题的各种效果也太酷了！！！最喜欢那个fade up的滚动！

    羡慕你们还有折腾的劲儿！！！

    • 古川政良 reply
      2019-06-28 22:05:54

      @小F 国内开Google Fonts是真的要死，我试了一下得有个几分钟（……）果断换掉了

      我也喜欢这个Fade Up！太好用了！代码又轻量效果又好！

  • lanee reply
    2019-06-30 19:12:03

    我在墙外也觉得loading很长……看了一下控制台无缓存字体载入用了15秒，这也太长了，谷歌本身的切片字体在我这里两三秒就能载完……

    https://i.imgur.com/keM6NTR.jpg

    • 古川政良 reply
      2019-06-30 23:00:52

      @lanee 因为没用谷歌了啊（……）换成科大的源了，墙外访问速度相应就掉了吧（大草）

      而且中文字体是比英文字体大……我又是拿来渲染正文不可能搞残缺字符集（。）15s还可以啦就当开个大点儿的图呗，反正二次访问就顺滑了

      • lanee reply
        2019-07-01 10:34:12

        @古川政良 我测了一下ping值，国内中科大镜像也没谷歌快啊😂（国内的谷歌字体服务器在北京来着），应该不是这个问题吧。而且你头图300k也只用200ms，不到3M的字体用15秒也太谜了。

        中科大这个镜像好像是50+切片每个文件逐个载入的（这没有切片的意义了啊…）所以特别慢。谷歌正式提供CJK切片字体也是去年才开始的，科大镜像是不是没考虑到这个

        • 古川政良 reply
          2019-07-01 11:54:39

          @lanee ？？？？那这得去问问科大的项目组，估计是没来得及更新上，等会儿我去机上ping一下看看到底哪边速度快点儿，国内服务器在北京吗？？我觉得直连还是慢啊？？（大草）

        • 古川政良 reply
          2019-07-01 14:08:17

          @lanee 我这边估计是因为在华南ping出来是上海的服务器……哎好烦啊就这么挂着google的api好了，上不来的自己搭梯，这年头谁还没个打手游的梯子！（←地图炮请勿当真）

          • labee reply
            2019-07-01 14:19:56

            @古川政良 上海也有，我听说是这俩（），不过因为国内网络环境复杂所以还是有些什么内网连不上。科大和其它镜像都是谷歌还没把服务器放进来的时候建的，我用的贴吧css作者也是后来把镜像都撤了直连谷歌😂

            • 古川政良 reply
              2019-07-01 14:37:04

              @labee 小海龙说Google Fonts的问题在于不同地区访问可能很玄妙有的能行有的不行……我俩考虑了一下Self Hold然后看着20多M的字体哽了一下算了算了.jpg

              最后选择放弃治疗，在有更优雅的解决方案前就这么扔着吧，谁上不来谁自己想法子爬梯拉倒！（←不负责任甩锅.jpg

              • lanee reply
                2019-07-01 17:10:41

                @古川政良 有那种全国ping的测速工具，我是用那个测的，包括镜像在内都有个别地区不行（。

                另外可以把思源宋体的各种名字都写在前面，'Noto Serif CJK SC', 'Noto Serif CJK', 'Source Han Serif SC', ‘Source Han Serif’，万一大家电脑上装了这个字体呢.jpg

                • 古川政良 reply
                  2019-07-01 17:13:55

                  @lanee nsdd，小海龙跟我说要不要根据font_from来分配是给谷歌还是给科大甚至给local（。）不过还要研究一下api，我对后端判断这块实在是有点菜鸡……

                  • lanee reply
                    2019-08-11 23:44:35

                    @古川政良 前阵太忙了忘了这个字体还有个问题，iOS上部分地方（列表、注音、code等前后）会出现异常字符，查了一下应该是这个问题：https://github.com/google/fonts/issues/1913

                    截图：https://i.imgur.com/Ea0R5PO.jpg

                    • 古川政良 reply
                      2019-08-12 08:53:03

                      @lanee 感谢反馈！没有苹果系的设备完全没发现……调整了一下text-align的默认设定，现在还有这个问题吗？

                      • lanee reply
                        2019-08-12 21:26:43

                        @古川政良 没有变化😂，应该是只要两端对齐就会在某些标签下引发这个bug

                        • 古川政良 reply
                          2019-08-13 08:11:51

                          @lanee 那就没办法了，只能等iOS自己修复这个bug了…………

  • 林木木 reply
    2019-07-17 09:23:20

    厉害厉害!!

  • 林木木 reply
    2019-07-17 10:08:40

    超具个性的主题！

  • 林木木 reply
    2019-07-17 10:13:20

    添加Loading页面，这个功能不太友好，那个主题页面几乎打不开，或者如果有个图片挂掉了，会不会导致一直卡load？

    • 古川政良 reply
      2019-07-17 10:15:34

      @林木木 图片挂掉了好像不要紧，只要网页加载完了就会消失，但主题页面打不开估计会卡一段时间，我也在想要不要限定一个最长时长

△