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 吧。