写了一个 (Farbox) 模板

2015/02/27 | 5分钟阅读 | 更新于 2015/02/27

持续更新中

3月3号第二次更新

走在路上联想到我的 post.jade 里的评论自动变成 disqus 评论,那么岂不是说我的 talk.jade 也根本不需要那么麻烦, 直接 include include/comments 就好了 改了一下居然真得可以


3月3号更新

我把About me 加进标题(site.title)里了,一是因为我的这套模板在宽度小于720px时会按照320px重新布局,四个链接的导航栏也就差不多这么宽,再多一个之后又会多出一行,麻烦。二是因为我有一个HOME链接指向首页,如果 site.title 也这样,就重复了。 试用了首页上的简历制造,感觉很简约,不过在安装这东西的时候出了点问题。我把它直接安到当前站点了,结果访问bin16.farbox.com的时候只能看到简历,但是其他路径还是可以访问的,比如bin16.farbox.com/talk 之类的。 解决这个问题也简单,去站点管理里,如果你用的自定义模板,就把模板改回使用custom template,进模板,改回default template。 简历实际上是一个名为 index.txt 的 markdown文件,我把它挪在了 me 文件夹下,改为 me.txt,这样还是可以访问,不过样式就不如之前那样大气了。不过以我现在的渣渣水平,这样挺好。 ps:原来文章设为 draft 只是在Archive 里不会显示出来,但是实际还是可以访问的。这很方便


3月2号第二次更新

略诡异

起初 disqus 不能匿名评论,所有设置都看了n遍并保存,更改语言和允许访客评论都没有变化,电脑加手机几个浏览器轮流刷新。知识库,帮助什么的都看了好多遍,无解!然后自己去评论了一句,哎?好了。。。

talk.jade 里之前试图加入评论功能的时候就常常失败,只有某二狗成功评论过。后来就把这个功能去掉了。这次引入disqus评论,把代码拆成jade模板,然后引用js才成功展示出来。但是博客文章的评论是什么时候替换掉的。。

还缺一个About me


3月2号更新

  1. 添加友情链接,和tag在一起,感觉tags占地面积太小,看着好孤单的样子
  2. 在talk中引入disqus评论

注册disqus,往博客引入代码的时候发现问题,.jade文件里怎么都没办法include disqus.html说找不到这个模板,于是把.html拆解,talk.jade 中include disqus.jade; disqus.jade中load disqus.js。


3月1号再次更新

模仿了 http://blog.if404.com 的闲言碎语做了个talk页面出来,可以吐槽啦,这样的话有没有按修改时间排序反而不重要了


3月1号更新

我有404页面啦,先不弄别的东西进去了

接下来

做个链接页面吧,把我觉得好玩儿的链接添加进去,还有友链。

我也想要一个写吐槽的页面,写灵感写吐槽等等 http://blog.if404.com/isaid.md 就是这样,只有一个markdown文件

PS: 28号后面就是3月1号了,有点不习惯

!好像我之后如果把模板共享出去404页面不能填写绝对地址,嘛,改改去

貌似缺少about me

还有文章能不能按照修改时间排序,算动态了,我记得 meta info 可以自己扩展的?

唠叨到这里先


28号第二次更新

标签的问题解决了,读了几套默认模板的tag部分,大致上懂了。现在tag点进去是一堆tag,点击某一个tag会出现文章列表。mixins文件的函数借鉴了ink模板,但是我简化了。不使用category,翻页简化成只有上下页。

文件结构整理过了,css全丢一个文件夹,没用的文件统统删掉,js改名为tool.js,不过没什么用

大脑终于可以稍微休息一下了,睡觉了


28号更新

解决了响应式的问题,写完模板发现网页在手机上总是显示的莫名其妙,检查了各种代码,又参考了blog.if404.com的设计,最后解决。主要问题是我的移动版页面下顶栏和底栏被我设置了最小宽度,且大于我给它针对移动设备缩放后的宽度,结果页面生生被撑开了。

opera(webkit内核)上的响应式设计工具比firefox上强了不少,赞


27号原内容

来到farbox感觉模板样式都不怎么满意,于是就自己开始写。第一次用jade这东西,又跑去给atom加了jade高亮,顺带学会了给atom安装package。

一些东西

喜欢 Yukina 的侧栏,但是这个侧栏是不是太简洁了,没有 archive 以及别的什么。在自己写模板的过程中,主要是借鉴着这个模板的样子来的,加上昨天发现 jade 首页居然可以将 jade 实时翻译成 html,我以为是摆设呢,就这样 jade 的语法问题大致解决。

然后数据,首页的博客列表获取 post 信息模仿自 Yukina 模板。但是后来我想知道这些数据是怎么规定的,我觉得 farbox 的 help 里面应该有,结果所有关于 templete 的内容都找过了,居然没发现。这不科学!后来无意间才发现了 getData 这一项。好吧。感觉 help 里面结构不太合理,而且没有搜索功能好不方便。

又一些东西

模板的样子嘛,暂时就是这样,所有蓝色都是 #7ac4c3,等我想换什么颜色的时候直接对所有 style.css 文件来个查找替换就好了。

适应屏幕,检测到屏幕宽小于长的时候侧栏会跑到顶上去,变成一条。但是这东西在firefox上怎么测试怎么准,在我的手机上怎么测试怎么不准。之前手机分辨率太高整个页面都铺开了,现在倒是不铺开,但是会自动放大。而且手机的更新会慢些,样式表缓存了?####接下来####

标签!绝对要添加标签。

404!做一堆404页面出来,随机用

然后完善一下,打包共享出来,现在暂时不允许克隆。

模板当前所有文件

  • basic.scss 这个不是我写的,是来自 default 模板,规定了所有基础元素的样式,包括高亮
  • before.css 这个是我拿来清楚自带格式的
  • style.css 整个框架的样式
  • base.jade 包括侧栏和底栏等通用的
  • index.jade 首页
  • post.jade post页
  • archieve.jade post列表
  • a01.js 这个没用,我拿来测试的
  • basic.css Yukina 的 basic 样式文件,没有使用这个

© 2026 香蕉引擎故障报告

🌱 Powered by Hugo with theme Dream.

关于

要怎么介绍自己呢,🤔。

很早以前是作为 Web 前端在学习的,但是工作第一年就成为了全干工程师。喜欢尝试各种东西,什么都会一点。

一直很喜欢 Ebiten 游戏引擎 ,特别简洁,用它做过一些小东西,可以查看这个分类 。另外特别推荐这个木鱼 ,是一个相对完整的小玩意儿,包含手搓的一个简单的 UI 框架;支持鼠标和键盘操作;有多语言和主题切换功能;同时支持 Web 端和客户端。它的源代码在 bin16/wooden-fish

主题

网站基于 Hugo,当前使用的是 hugo-theme-dream 主题的修改版 ,根据我的需要,做了一些对 PaperMod 的兼容。

我自己也写过主题 ,但是没有别人写的好看。

正在从我的笔记中往外搬运内容

等待更新:

  • 从《锈湖》中学了些什么东西
  • 我拿 React 写解谜游戏的经过
  • 基于 Pocketbase 的 Pocket Memos
  • 数独!