想要一个个人网站

设想

在 Github Pages 上面搭一个个人网站, 用来保存像这样的文章.

需求

类似 VSCode 的布局, 左边是目录, 右边是文章
目录要能分章节, 一个章节下面包含多篇文章

找个好看的模板

主题模板网站 http://jekyllthemes.org/

Gitbook 主题这个主题简洁明了, 非常符合我的需求! 左边是目录, 右边是文章, 美中不足的是目录缺少分章节功能.

来搭建吧

Fork Repo

Repository name = Windmill-City.github.io

启用 Github Pages

Settings->Pages->Build and deployment
- Source = Deploy from a branch * Branch = main|/root

修改 About

About->⚙
- Description = Gitbook of personal documents
- Website = https://Windmill-City.github.io/
- 取消 Releases
- 取消 Packages

看看页面效果

emm…, CSS 怎么崩了

F12 看看怎么回事原来是 Request URL 出问题了

修复 `Request URL`

Repo->_config.yml

url:              'https://Windmill-City.github.io/'
baseurl:          ''

顺便配置些个人信息

Repo->_config.yml

# Configurations
title:            明理
longtitle:        探究事物的基本道理
author:           Windmill_City
email:            1449182174@qq.com
description: >
  简单的规则构成复杂的系统

等待构建完成

再看看效果

这次就对了!

什么? 还是不对? (＃°Д°)

F12->Network->Disable cache->F5 清除浏览器缓存并刷新

冒出来的问题

有个难看的 `Fork it now`

--- a/_includes/toc-date.html
+++ b/_includes/toc-date.html
@@ -50,12 +50,6 @@
                     {% endif %}
                 {% endif %}
             {% endfor %}
-
-            <li>
-                <a href="https://github.com/sighingnow/jekyll-gitbook/fork" target="blank" class="gitbook-link">
-                    Fork it Now!
-                </a>
-            </li>
         </ul>
     </nav>
 </div>

怎么这篇文章不显示在目录里?

原来 Jekyll 规定, _post 里的文章命名必须遵循以下格式:

YEAR-MONTH-DAY-title.MARKUP

即 4 位年份, 2 位月份, 2位日期, 然后是标题以及文件后缀

例如:

2022-9-12-想要一个个人网站.md

Jekyll 还规定, _pages 里的文章的开头必须有前言(Front Matter)

例如:

---
title: 文章标题
---

怎么没有图标?

又是路径错误!

--- a/_config.yml
+++ b/_config.yml
@@ -22,7 +22,7 @@ toc:
   h_max: 3

 # customize the link favicon in header, will be /
-favicon_path:     /assets/gitbook/images/favicon.ico
+favicon_path:     assets/gitbook/images/favicon.ico

 # markdown render engine.
 markdown:         kramdown

为什么 `回到顶部` 按钮不出现?

看到 Console 里报错 sideId undefined, 原来是 siteId 拼成 sideId了!

--- a/assets/gitbook/gitbook-plugin-sharing/buttons.js
+++ b/assets/gitbook/gitbook-plugin-sharing/buttons.js
@@ -92,8 +92,8 @@ require(['gitbook', 'jquery'], function(gitbook, $) {
         }

         // Direct actions to share
-        $.each(SITES, function(sideId, site) {
-            if (!opts[sideId]) return;
+        $.each(SITES, function(siteId, site) {
+            if (!opts[siteId]) return;

             var onClick = site.onClick;

文章里包含的 `Liquid` 语句居然会被解析?

在 md 里把包含 Liquid 的语句用 {% raw %} .. {% endraw %} 包起来就好了

什么? 怎么正常表达 {% raw %} .. {% endraw %} ?

{% assign openTag = '{%' %}
{{ openTag }} raw %} .. {{ openTag }} endraw %}

用 Liquid 变量来转义就好了

怎么指定默认 `Layout`?

--- a/_config.yml
+++ b/_config.yml
@@ -61,3 +61,9 @@ plugins:

 extra_css:
   - assets/page-metadata.css
+
+defaults:
+  - scope:
+      path: ""
+    values:
+      layout: "post"

新增的功能

显示 metadata

效果:

--- a/_includes/body.html
+++ b/_includes/body.html
@@ -1,23 +1,40 @@
 <div class="page-wrapper" tabindex="-1" role="main">
     {% if page.cover %}
-        <img src="{{ page.cover }}"
-             width="100%"
-             height="{{ page.cover_height | default: '100%' }}"
-             alt="{{ page.title }}"
-             style="object-fit: cover;"
-        />
+    <img src="{{ page.cover }}" width="100%" height="{{ page.cover_height | default: '100%' }}"
+        alt="{{ page.title }}" style="object-fit: cover;" />
     {% endif %}

     <div class="page-inner">
         <div id="book-search-results">
             <div class="search-noresults">
-                <section class="normal markdown-section">
+                <section class="page-meta">
                     {% if page.title %}
-                        <h1 id="{{ page.id }}">{{ page.title }}</h1>
+                    <h1 id="{{ page.id }}">{{ page.title }}</h1>
                     {% else %}
-                        <h1 id="{{ page.id }}">{{ site.title }}</h1>
+                    <h1 id="{{ page.id }}">{{ site.title }}</h1>
                     {% endif %}

+                    <ul>
+                        <li>
+                            {% if page.author %}
+                            <a>{{ page.author }}</a>
+                            {% else %}
+                            <a>{{ site.author }}</a>
+                            {% endif %}
+                        </li>
+                        {% if page.date %}
+                        <li>
+                            <a>{{ page.date | date: "%Y-%m-%d" }}</a>
+                        </li>
+                        {% endif %}
+                        {% for category in page.categories %}
+                            <li>
+                                <a>{{ category }}</a>
+                            </li>
+                        {% endfor %}
+                    </ul>
+                </section>
+                <section class="normal markdown-section">
                     {{ content }}
                 </section>
             </div>
@@ -25,4 +42,4 @@
             {%- include search.html -%}
         </div>
     </div>
-</div>
+</div>

+++ b/assets/page-metadata.css
@@ -0,0 +1,19 @@
+.page-meta ul {
+    margin-top: -0.5em;
+    padding: 0;
+    color: #999;
+    font-size: .92857em;
+}
+
+.page-meta li {
+    display: inline-block;
+    margin: 0 8px 0 0;
+    padding-left: 12px;
+    border-left: 1px solid #EEE;
+}
+
+.page-meta li:first-child {
+    margin-left: 0;
+    padding-left: 0;
+    border: none;
+}

--- a/_config.yml
+++ b/_config.yml
@@ -61,3 +61,5 @@ plugins:
   - jekyll-feed
   - jekyll-readme-index
   - jemoji
+
+extra_css:
+  - assets/page-metadata.css