关注我的兄弟中，有不少人的博客是直接用 GitHub Pages 托管的吧，博客网站名一般是：xxxx.github.io ，但是自己搞得网站确实不怎么美观，虽然可借助 hexo 搭建，很多网站风格还是入不了你的法眼，是吧？

一个美观实用的中文排版开源项目_github

今天给大家推荐一个小众的 GitHub 项目：赫蹏，一个非常美观又实用的开源项目，超好看的中文排版样式。

赫蹏（hètí）是专为中文内容展示设计的排版样式增强。它基于通行的中文排版规范而来，可以为网站的读者带来更好的文章阅读体验。

1. 主要特性

主要特性：

  • 贴合网格的排版；

  • 全标签样式美化；

  • 预置古文、诗词样式；

  • 预置多种排版样式（行间注、多栏、竖排等）；

  • 多种预设字体族（仅限桌面端）；

  • 简 / 繁体中文支持；

  • 自适应黑暗模式；

  • 中西文混排美化，不再手敲空格????（基于 JavaScript 脚本）；

  • 全角标点挤压（基于 JavaScript 脚本）；

  • 兼容normalize.css、CSS Reset等常见样式重置；

  • 移动端支持；

  • ……

除此之外，它还支持如下的特性：

  • 自适应黑暗模式

  • 标点挤压

  • 中、西文混排

  • 繁体中文支持

  • 诗词版式

  • 行间注版式

2. 效果图

总之，用上就会变好看。来欣赏一下效果图：

一个美观实用的中文排版开源项目_html_02

下面是预览的效果。

预览链接：https://sivan.github.io/heti/

一个美观实用的中文排版开源项目_js_03

更改字体

一个美观实用的中文排版开源项目_github_04

加网格

一个美观实用的中文排版开源项目_css_05

黑夜模式

一个美观实用的中文排版开源项目_js_06

3. 使用方法

使用方法如下：

在页面的 <head> 标签中引入 heti.css 文件：

<link rel="stylesheet" href="//unpkg.com/heti/umd/heti.min.css">

在要作用的容器元素上增加 class="heti" 的类名即可：

<article class="entry heti">
  <h1>我的世界观</h1>
  <p>有钱人的生活就是这么朴实无华，且枯燥</p>
  ……
</article>

使用增强脚本（可选）：

<script src="//unpkg.com/heti/umd/heti-addon.min.js"></script>
<script>
  const heti = new Heti('.heti');
  heti.autoSpacing(); // 自动进行中西文混排美化和标点挤压
</script>

是不是感觉很棒呢？

4. 下载地址

地址：https://github.com/sivan/heti