在 Github Pages 上面搭一个个人网站, 用来保存像这样的文章.
VSCode
的布局, 左边是目录, 右边是文章主题模板网站 http://jekyllthemes.org/
Gitbook 主题 这个主题简洁明了, 非常符合我的需求! 左边是目录, 右边是文章, 美中不足的是目录缺少分章节功能.
Repository name
= Windmill-City.github.io
Settings
->Pages
->Build and deployment
Source
= Deploy from a branch
* Branch
= main
|/root
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"
效果:
--- 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