Loading...如加载时间过长,请尝试科学上网。

棺と花束

Bitcron主题「皿」

1,995字自制Bitcron主题花式折腾424次阅读41条评论

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

项目 说明
主题
英文(罗马音) 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》放送完结长篇访谈(前篇)

tbc

嗯?你还不知道什么是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

更新日志

  • 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.
声明
本博所有图文如未特别声明,均为原创,未经授权禁止转载、二次上传。 若您喜欢本文,欢迎微信扫描下方赞赏码投喂作者(注:投喂了她也还是会咕,请务必谨慎) 赞赏作者
Comments
Write a Comment
  • 主题好炫酷,只是似乎在移动版浏览器上载入有问题,一直在转圈。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

                    • @cbsc 那就行了,暂时不折腾了(……)

  • 来撒花庆祝一下!(我竟然也拥有了姓名???)

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

  • 小F reply

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  • 厉害厉害!!

  • 超具个性的主题!

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

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