登录后台

页面导航

Awesome Bottles

最近接触到 Awesome List 这个 Topic,以前见过但没深入了解。这个项目大概就是组织大家用收集一些很 Awesome 的东西,分类整理到 GitHub Repositories 上。
各种各样的列表还蛮实用的,就想着自己做一个 Awesome List 试试。

在推特上也看到了很多人在涂小瓶子,于是灵感来了,就做一个小瓶子图片的 Awesome List 好了。

简单介绍下所谓的小瓶子:通常是一张有很多空瓶子的图片,每个瓶子的下方有一段简单的文字。根据图片的标题和瓶底的文字,你可以给你喜欢 / 赞同的小瓶子涂色,你涂色(填充物)的高度就代表你对这一文字所指代的事物的喜欢 / 赞同程度。有点像一个简单的心理测试,但是没有准确的测试结果,能帮助别人更好地认识你。

尽管 Awesome 原项目强调「Only awesome is awesome.」,但我能找到的小瓶子图片太少了,也没办法挑三拣四了。于是 Awesome Bottles 这个项目就诞生了,整理了一些我在推特上看到的一些小瓶子,顺带用英语推广介绍了一下小瓶子。写完 README 之后才发现——我根本找不到英文的小瓶子,写英文文档有什么意义?于是自己做了个英文的小瓶子凑数。

项目地址:https://github.com/BigCoke233/awesome-bottles

Articles

继上一次《提问的智慧》之后,我又写了一篇《如何写一个好的自述文档(README.md)》。这次直接用英文写了,由于写到后面灵感缺失,可能会有些语法错误,望指正。

这篇文章主要讲如何给自己的 GitHub 写一个好的 README.md,我见过有很多 README 写的不清楚,甚至有不写的,所以希望这篇文能在你写项目自述文档的时候能够得到一些灵感。

同时我也需要其他语言的译本,包括中文(没错,我已经懒到不想做中文译本了),以及一些新的想法。欢迎提交 Pull Requests 和新的 issue,不过交流的时候最好都用英文吧。

项目地址:https://github.com/BigCoke233/how-to-make-an-awesome-README

Typography

以前写过一个叫做 Textretty 的文字排版方案,年久失修。最近打开看了下,第一反应是「卧槽这垃圾玩意是怎么活到今天还没被我删掉的」,发现有很多需要改进的地方,于是我二话不说就删掉了仓库重写。

重写的时候没什么灵感,于是就参考了一下 GitHub Markdown CSS(也就是 GitHub README.md 的样式) 和 yue.css,最后效果看起来还是蛮不错的。但是我感觉我大量 copy 了 GitHub 的样式,以致于它们的相似度达到 60%,尽管看起来没什么问题,也很规范,但打算在后期维护的时候多加入一些自己的元素。

简单介绍一下 Textretty,这个名字是 Text(文本) 和 Pretty(漂亮) 的组合。它主要应用在 html 网页上,引用样式表之后只要给显示文章内容的 div 写上.textretty的 class 就好了。但要注意了,textretty 不是类似 Bootstrap 用于整个网站的 CSS 框架,它只针对文字排版。

如果要使用的话,直接用 npm 安装下来,引用./dist/textretty.min.css就好了。

$ npm install textretty

此外,textretty 还有一个尚不完善的拓展库,里面有一些可以用在文章内丰富文章内容的 UI 组件。由于这不是这种排版样式表的重点,所以分离了出来,要引入./dist/textretty.expand.min.css才能使用。

项目地址:https://github.com/BigCoke233/textretty.css

Personal Page

再次重写了个人页面,这次用 PHP 写了个简单的多页面系统,主要代码如下:

<?php
$query = $_SERVER["QUERY_STRING"];
if(empty($query)) {
    include('./post/index.php');
} else {
    $post = preg_replace('/post\=(.*?)/s','${1}',$query);
    $file = './post/'. $post .'.php';
    if(file_exists($file)) {
    include($file);
        echo '<script>var page_id="'. $post .'";</script>';
    } else {
    include('404.php');
    echo '<script>var page_id="error_404";</script>';
    }
}
?>

通过$_SERVER["QUERY_STRING"];,也就是地址栏里形如?style=flat&id=1的参数,正则获取?post的值,然后通过这个值找到相应的 php 文件引入;如果找不到对应文件,就返回 404;如果为空,则为首页,引入./post/index.php。同时输出一个script标签,通过 JavaScript 定义这个页面的post_id
这种方法比较简陋,而且也没有考虑到有多个参数的情况。所以在使用 gitalk 和 pjax 的时候会返回 404,这个在后期可以优化一下,毕竟这整段都不足 20 行。

这个页面并没有开源,他储存在我的一个私有仓库里,等哪天成型了我才会公开吧,还可以加一个主题嵌套之类的。


最后,如果觉得不错的话,给项目送上一个小小的 Star 吧。

已有 40 条评论