文章来源于网络收集而来，版权归原创者所有，如有侵权请及时联系！

3 Jekyll 配置

发布于 2024-09-08 19:39:20 字数 22882 浏览 0 评论 0 收藏 0

3.1 网站目录结构

Jekyll expects your website directory to be laid out like so:

.
|-- _config.yml
|-- _includes
|-- _layouts
|  |-- default.html
|  |-- post.html
|-- _posts
|  |-- 2011-10-25-open-source-is-good.markdown
|  |-- 2011-04-26-hello-world.markdown
|-- _site
|-- index.html
|-- assets
  |-- css
    |-- style.css
  |-- javascripts

文件/目录	描述
_config.yml	存储配置数据文件。很多全局的配置或者指令写在这里。
_drafts	存放为发表的文章。这些是没有日期的文件。
_includes	目录，存放一些组件。可以通过{% include file.ext %} 来引用。
_layouts	目录，存放布局。一般有三个文件 default.html、page.html、post.html
_posts	目录，存放文章，格式化为： YEAR-MONTH-DAY-title.md 或者 YEAR-MONTH-DATE-title.MARKUP
_site	最终生成的博客文件就在这里。
index.html	博客的主页。
other	例如静态文件 CSS，Images 和其他。
assets	This folder is not part of the standard jekyll structure. The assets folder represents any generic folder you happen to create in your root directory. Directories and files not properly formatted for jekyll will be left untouched for you to serve normally.

备注：只要我们把自己需要的文件放到博客目录下，通过 jekyll build，该目录就会被复制到_site 里面。明白了目录结构之后，我们在通过 git 提交博客到服务器的时候，就可以通过.gitignore 来过滤掉_site 目录，而在服务器端再执行命令生成。

3.2 配置文件

3.2.1 _config.yml

全局的配置项

设置	选项或者参数
Site Source 网站源文件的根目录	source: DIR
Site Destination 生成网站的目录地址	destination: DIR
Safe 是否使用自定义插件	safe: BOOL
Exclude 排除目录或者文件	exclude: [DIR, FILE, ...]
Include 包含的目录或者文件	include: [DIR, FILE, ...]
Time Zone 设置时区	timezone: TIMEZONE

编译的命令选项

设置	选项或者参数
Regeneration 文件被修改时，启动自动生成	-w, --watch
Configuration 指定一个配置文件，可以覆盖 _config.yml	--config FILE
Drafts 处理和渲染草稿文章	--drafts
Future 发布未来的文章	future: BOOL --future
LSI 发布相关的文章	lsi: BOOL --lsi
Limit Posts 限制文章发布的数量	limit_posts: NUM --limit_posts NUM

服务器的命令选项

设置	选项或者参数
Local Server Port 本地服务器启动的端口号	port: PORT --port PORT
Local Server Hostname 服务器名称	host: HOSTNAME --host HOSTNAME
Base URL 基础链接	baseurl: URL

_config.yml 示例

markdown: redcarpet
pygments: true
paginate: 8
safe: false

Site config

title: Keefe Wu
description: Just another Jekyll theme design and code by Keefe Wu.
keywords: Jekyll Theme
url: http://dennycn.github.io
feed: /atom.xml
favicon: http://img.tongji.linezing.com/3488260/tongji.gif

Nav config

nav:
 - text: 首页
  url: /index.html
 - text: 分类目录
  url: /categories.html
 - text: 项目归档
  url: /archives.html
 - text: 团队介绍
  url: /contact.html
 - text: 团队链接
  url: /links.html

Author config

author:

3.2.2 常用变量

了解完全局的配置之后，我们还需要了解 Jekyll 的变量。通过这些变量，可以输出文章的标题、内容、链接等等。

全局变量

变量	描述
site	设置整个站点的信息和全局配置，定义在_config.xml。
page	设置页面信息和自定义的变量，定义在 markdown 的 YAML Front Matter（*.md）。
content	展示文章或者页面的内容。
paginator	当配置文件中设置了 paginator 的时候，这里可以读取分页的信息。

site 站点变量

变量	描述
site.time	当你运行 jekyll 时候的时间。
site.pages	当前的页面列表。
site.posts	倒序列出所有的文章。
site.related_posts	相关的文章。默认配置下最多 10 篇相关文章。
site.categories.CATEGORY	某一个分类的文章列表。
site.tags.TAG	某一个标签的文章列表。
site.[CONFIGURATION_DATA]	配置文件中的信息。

page 页面变量

变量	描述
page.content	页面渲染出来的内容。
page.title	页面标题。
page.excerpt	文章摘要。
page.url	页面链接地址。
page.date	页面或者文章的时间。
page.id	页面或者文章的唯一标识。
page.categories	页面或者文章的分类。
page.tags	页面或者文章的标签。
page.path	页面的路径。
page.CUSTOM	页面的自定义内容。

paginator 分页

变量	描述
paginator.per_page	每个分页的文章数量
paginator.posts	分页里的文章对象
paginator.total_posts	文章的总数
paginator.total_pages	分页的页数
paginator.page	当前第几页
paginator.previous_page	前一页的页码
paginator.previous_page_path	前一页的地址
paginator.next_page	下一页的页码
paginator.next_page_path	下一页的地址

有了这些变量，自定义一个 Jekyll 博客主题，应该不是一件难事。

3.2.3 常见问题

Build Warning: Layout 'nil' requested in atom.xml does not exist.

解决方法：将 nil 改为 null

Deprecation: You appear to have pagination turned on, but you haven't included the jekyll-paginate gem. Ensure you have gems: [jekyll-paginate] in your configuration file.

解决方法：$ gem install --user-install --bindir ~/bin --no-document --pre jekyll-paginate

然后_config.yml 修改如下，

# PAGINATION
gems: [jekyll-paginate]
paginate: 5
paginate_path: "page:num"

3.3 主题 Theme

那么在自定义博客的时候，需要注意些什么呢？这里有之前写过的一些总结：

3.3.1 导航排列

<ul>
 {% assign pages_list = site.pages %}
 {% include JB/pages_list %}
</ul>

3.4 插件 Plugin

3.4.1 语法高亮 Pygments

Pygments 代码高亮语法使用介绍：点击这里

具体例子效果如下：

public class HelloWorld {
  public static void main(String args[]) {
    System.out.println("Hello World!");
  }
}

3.4.2 评论插件

在 Jekyll 网站中添加评论功能可以增加用户互动，常用的评论插件有 Disqus 和 Utterances。下面是如何集成这两个插件的简要说明：

1. Disqus

Disqus 是一种流行的评论系统，容易集成到 Jekyll 中。

创建 Disqus 账户 ：
- 注册一个 Disqus 账户并创建一个新的网站。
获取短名称 ：
- 在 Disqus 的管理面板中找到你网站的短名称（shortname）。

在 Jekyll 中添加 Disqus 代码 ：

在你的 _layouts 文件夹中的 default.html 或 post.html 文件中，找到适合插入评论的地方，通常是在文章内容的底部。

添加以下代码：

<div id="disqus_thread"></div>
<script>
    var disqus_config = function () {
        this.page.url = '{{ page.url | absolute_url }}';  
        this.page.identifier = '{{ page.id }}'; 
    };
    (function() {
        var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
        dsq.src = 'https://YOUR_DISQUS_SHORTNAME_HERE.disqus.com/embed.js';
        (document.head || document.body).appendChild(dsq);
    })();
</script>
<noscript>Please enable JavaScript to view the comments powered by Disqus.</noscript>

将 YOUR_DISQUS_SHORTNAME_HERE 替换为你从 Disqus 获取的短名称。

2. Utterances

Utterances 是一个基于 GitHub Issues 的评论系统，适用于 GitHub Pages。

在 GitHub 上创建一个评论存储库 ：
- 创建一个新的 GitHub 存储库来存储评论。这个存储库将用于 Utterances 的评论数据存储。
在 GitHub 上配置 Utterances ：
- 访问 Utterances 并授权你的 GitHub 账户。
- 选择你刚创建的存储库，并配置评论设置。

在 Jekyll 中添加 Utterances 代码 ：

在你的 _layouts 文件夹中的 default.html 或 post.html 文件中，找到适合插入评论的地方，通常是在文章内容的底部。

添加以下代码：

<script>
  (function() {
    var utterances = document.createElement('script');
    utterances.src = 'https://utteranc.es/client.js';
    utterances.setAttribute('repo', 'YOUR_GITHUB_USERNAME/YOUR_REPOSITORY');
    utterances.setAttribute('issue-term', 'pathname');
    utterances.setAttribute('label', 'Comment');
    utterances.setAttribute('theme', 'github-light');
    utterances.crossOrigin = 'anonymous';
    utterances.async = true;
    document.body.appendChild(utterances);
  })();
</script>

将 YOUR_GITHUB_USERNAME/YOUR_REPOSITORY 替换为你的 GitHub 用户名和存储库名称。

选择评论系统

Disqus ：功能丰富，易于设置，但需要注册并接受 Disqus 的服务条款。
Utterances ：与 GitHub 集成，无需额外的用户账户，适合静态网站托管在 GitHub Pages 上。

这两种方法都可以有效地为你的 Jekyll 网站添加评论功能。

3.4.3 统计分析：baidu/google

_config.yml

analytics :
provider : baidu
// 如果上面 provider 对应值为空，即 site.JB.analytics.provider 为空，则不会包含统计代码。

// 选择统计代码 JB/analytics
{% if site.safe and site.JB.analytics.provider and page.JB.analytics != false %}
{% case site.JB.analytics.provider %}
{% include JB/analytics-providers/baidu %}
{% include JB/analytics-providers/google %}
{% include JB/analytics-providers/getclicky %}
{% include JB/analytics-providers/mixpanel %}
{% include JB/analytics-providers/piwik %}

// baidu stat
var _hmt = _hmt || [];
(function() {
 var hm = document.createElement("script");
 hm.src = "https://hm.baidu.com/hm.js?64344d27a02ec2495c596aa115ebb540";
 var s = document.getElementsByTagName("script")[0];
 s.parentNode.insertBefore(hm, s);
})();

3.4.4 广告：baidu/alibaba/google/amazon

google 广告

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- 博客内部广告 -->
<ins class="adsbygoogle"
   style="display:inline-block;width:300px;height:250px"
   data-ad-client="ca-pub-4594322204962044"
   data-ad-slot="2622044211"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

3.4.5 静态搜索

需要使用 jquery 与 bootstrap3 框架。

原理：生成所有 post 带标题和 url 的 search.xml ，用 ajax 技术异步搜索此文件内容。

3.4.6 内容推荐：ujian

<!-- UJian Button BEGIN -->
<script type="text/javascript">var ujian_config = {defaultPic:'http://wuqifu.cn/img/keefe.jpg'};</script>
<script type="text/javascript" src="http://v1.ujian.cc/code/ujian.js?type=slide&fade=1&uid=1908435"></script>
<a href="http://www.ujian.cc" style="border:0;"><img src="http://img.ujian.cc/pixel.png" alt="ujian" style="border:0;padding:0;margin:0;" /></a>
<!-- UJian Button END -->

3.5 网站推广

3.5.1 站点地图：sitemap/roadmap

sitemap：一堆 URL 的集合，提供给 SPIDER 方便抓取。

---
# Remember to set production_url in your _config.yml file!
title : 站点地图
---

{% for page in site.pages %}
{{site.production_url}}{{ page.url }}{% endfor %}
{% for post in site.posts %}
{{site.production_url}}{{ post.url }}{% endfor %}

3.5.2 订阅：atom /rss

atom.xml

---
layout: default
comment: true
---

<div class="article article-post">
  <h2 class="title">{{ page.title }}</h2>
    <div class="info">
   <span class="info-title"><i class="icon-calendar"></i> Published: </span>
   <span class="info-date">{{ page.date | date_to_string }}</span>
   <span class="info-title"><i class="icon-folder-open"></i> Category: </span>
   <span class="info-link"><a href="{{ site.url }}/categories.html#{{ page.category }}-ref" >{{ page.category }}</a></span>
  </div>
  {{ content }}
  <nav class="article-previous fn-clear">
   {% if page.previous %}
        <a class="prev" href="{{ page.previous.url }}" rel="bookmark">&laquo;&nbsp;{{ page.previous.title | truncatewords:5 }}</a>
   {% endif %}
   {% if page.next %}
        <a class="next" href="{{ page.next.url }}" rel="bookmark">{{ page.next.title | truncatewords:5 }}&nbsp;&raquo;</a>
   {% endif %}
  </nav>
    <div class="comment">
   {% if site.disqus.config %}
        <div id="disqus_thread"></div>
   {% else %}
     {% if site.duoshuo.config %}
            <div class="ds-thread"></div>
     {% endif %}
   {% endif %}
  </div>
</div>

rss.xml

---
layout: null
title : RSS 订阅
---

<?xml version="1.0" encoding="UTF-8" ?>
<rss version="2.0">
<channel>
   <title>{{ site.title }}</title>
   <description>{{ site.title }} - {{ site.author.name }}</description>
   <link>{{ site.production_url }}{{ site.rss_path }}</link>
   <link>{{ site.production_url }}</link>
   <lastBuildDate>{{ site.time | date_to_xmlschema }}</lastBuildDate>
   <pubDate>{{ site.time | date_to_xmlschema }}</pubDate>
   <ttl>1800</ttl>

{% for post in site.posts %}
   <item>
       <title>{{ post.title }}</title>
       <description>{{ post.content | xml_escape }}</description>
       <link>{{ site.production_url }}{{ post.url }}</link>
       <guid>{{ site.production_url }}{{ post.id }}</guid>
       <pubDate>{{ post.date | date_to_xmlschema }}</pubDate>
   </item>
{% endfor %}

</channel>
</rss>

3.5.3 分享 share

在 Jekyll 网站中添加分享按钮可以帮助访问者轻松地分享你的网站内容到社交媒体。下面是一些常见的方法来实现这一功能：

1. 使用第三方分享插件

有很多第三方插件可以简化添加社交分享按钮的过程，比如 ShareThis 或 AddThis 。这些插件通常提供了易于嵌入的代码，你只需在 Jekyll 模板中插入它们的代码即可。

使用 ShareThis

注册并获取代码 ：
- 访问 ShareThis 网站。
- 注册并创建一个新的分享按钮。
插入代码 ：
- 从 ShareThis 获取的代码通常会包括一个 JavaScript 文件链接和一段 HTML 代码。
- 将 JavaScript 代码添加到你的 Jekyll 网站的 <head> 部分。你可以在 _layouts 文件夹中的 default.html 或 post.html 中找到这个部分。
```
<script type='text/javascript' src='https://platform-api.sharethis.com/js/sharethis.js#property=YOUR_PROPERTY_ID&product=inline-share-buttons' async='async'></script>
```
- 在你希望显示分享按钮的模板文件中插入 HTML 代码。通常，这是你的网站文章页或首页。
```
<div class="sharethis-inline-share-buttons"></div>
```

2. 手动添加分享按钮

如果你不希望使用第三方插件，可以手动添加分享按钮。以下是一些常用的社交媒体分享按钮的示例代码：

Twitter 分享按钮

<a href="https://twitter.com/share" class="twitter-share-button" data-show-count="false">Tweet</a>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

Facebook 分享按钮

<div class="fb-share-button" data-href="{{ page.url | absolute_url }}" data-layout="button_count"></div>
<script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v13.0"></script>

LinkedIn 分享按钮

<script src="https://platform.linkedin.com/in.js" type="text/javascript">lang: en_US</script>
<script type="IN/Share" data-url="{{ page.url | absolute_url }}"></script>

3. 使用 Jekyll 插件

有一些 Jekyll 插件可以帮助你更轻松地添加社交分享按钮，例如 jekyll-share-buttons 。这些插件通常提供了简单的配置选项，并且可以自动插入分享按钮。

安装插件 ：
- 在你的 Jekyll 项目的 Gemfile 中添加插件：
```
gem 'jekyll-share-buttons'
```
- 运行 bundle install 安装插件。
配置插件 ：
- 在你的 _config.yml 文件中配置分享按钮的设置。例如：
```
share_buttons:
  - facebook
  - twitter
  - linkedin
```
在模板中使用插件 ：
- 在你希望显示分享按钮的模板文件中，添加相应的 Liquid 代码：
```
{% share_buttons %}
```

4. 自定义按钮样式

如果你希望分享按钮与网站设计一致，可以通过 CSS 自定义按钮的样式。你可以在你的 CSS 文件中添加样式规则来调整按钮的外观和位置。

通过这些方法，你可以在 Jekyll 网站中有效地添加社交分享功能，提升内容的可见性和分享率。如果有具体的需求或问题，也可以根据实际情况做进一步调整。

3.5.4 微博/微信公众号

在 Jekyll 网站上配置微博和微信公众号的功能，可以通过添加相应的社交媒体链接和展示相关信息来实现。以下是如何在你的网站上添加这些功能的简单指南：

1. 配置微博链接

微博是一个流行的社交媒体平台，你可以在网站上添加微博链接，方便用户访问你的微博主页。

添加微博图标链接

获取微博图标 ：
- 你可以从微博图标资源下载微博图标，或者使用现有的图标库。
编辑布局文件 ：
- 在 _layouts 文件夹中，找到适用的布局文件，如 default.html 。
插入微博链接 ：
- 添加以下 HTML 代码到你希望显示微博链接的位置：
```
<div id="social-media">
  <h2>关注我们</h2>
  <a href="https://weibo.com/YOUR_WEIBO_USERNAME" target="_blank">
    <img src="URL_TO_WEIBO_ICON" alt="微博" />
  </a>
</div>
```
- 将 YOUR_WEIBO_USERNAME 替换为你的微博用户名， URL_TO_WEIBO_ICON 替换为微博图标的实际 URL。

示例样式

你可以通过 CSS 自定义微博链接的样式：

#social-media {
  text-align: center;
  margin: 20px 0;
}

#social-media img {
  width: 40px;
  height: auto;
  margin: 10px;
}

2. 配置微信公众号

微信公众号 可以通过二维码展示，方便用户扫描关注。

添加公众号二维码

生成二维码 ：
- 在微信公众号平台生成你的二维码，或者使用第三方工具生成二维码。
编辑布局文件 ：
- 同样在 _layouts 文件夹中，找到适用的布局文件。
插入二维码 ：
- 添加以下 HTML 代码到你希望展示二维码的位置：
```
<div id="wechat">
  <h2>关注我们的微信公众号</h2>
  <img src="URL_TO_WECHAT_QR_CODE" alt="微信公众号二维码" />
</div>
```
- 将 URL_TO_WECHAT_QR_CODE 替换为你的微信公众号二维码图片的实际 URL。

示例样式

你可以通过 CSS 自定义二维码的样式：

#wechat {
  text-align: center;
  margin: 20px 0;
}

#wechat img {
  max-width: 200px;
  height: auto;
}

3. 确保信息准确

确保你的微博和微信公众号链接或二维码信息准确无误，以避免用户无法访问或关注。

通过这些步骤，你可以在 Jekyll 网站上成功配置微博和微信公众号的功能。

3.5.5 捐款：alipay/weixin

在 Jekyll 网站中配置捐款功能，支持如支付宝和微信支付，通常需要一些自定义代码来实现。这里是一个基本的方法来添加这些支付选项：

1. 设置支付二维码

支付宝和微信支付 都提供了二维码支付的功能。你需要创建和获取这些二维码的图片链接。

生成二维码 ：
- 在支付宝和微信支付的商户平台中生成你的二维码，或者使用第三方工具生成包含你支付链接的二维码。
获取二维码链接 ：
- 下载二维码图片，或者使用二维码生成工具获取图片的 URL。

2. 在 Jekyll 中添加捐款信息

你可以将二维码和捐款信息添加到你的网站页面，通常在侧边栏、页脚或者专门的捐款页面中。

示例：添加到 `default.html` 布局文件

编辑布局文件 ：
- 在你的 Jekyll 项目中的 _layouts 文件夹中，找到 default.html 或其他适用的布局文件。

插入捐款信息 ：

在文件中适当的位置插入以下 HTML 代码：

<div id="donation">
  <h2>支持我们</h2>
  <p>您的支持对我们很重要！请扫描以下二维码进行捐款：</p>
  <div>
    <h3>支付宝</h3>
    <img src="URL_TO_ALIPAY_QR_CODE" alt="支付宝二维码" />
  </div>
  <div>
    <h3>微信支付</h3>
    <img src="URL_TO_WECHAT_QR_CODE" alt="微信二维码" />
  </div>
</div>

将 URL_TO_ALIPAY_QR_CODE 和 URL_TO_WECHAT_QR_CODE 替换为你的二维码图片的实际 URL。

添加样式（可选） ：

你可以通过 CSS 文件自定义捐款信息的样式。比如，在你的 CSS 文件中添加：

#donation {
  text-align: center;
  margin: 20px 0;
}

#donation img {
  max-width: 150px;
  height: auto;
  margin: 10px;
}

#donation h2 {
  font-size: 1.5em;
  margin-bottom: 10px;
}

#donation h3 {
  margin-top: 20px;
}

3. 确保支付安全

确保二维码中的链接是正确的，并且在生成二维码时采取适当的安全措施，以防止被篡改。

这样，你就可以在 Jekyll 网站上添加支付宝和微信支付的捐款选项。用户可以通过扫描二维码轻松进行捐款。

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

列表为空，暂无数据

3 Jekyll 配置

3.1 网站目录结构

3.2 配置文件

3.2.1 _config.yml

3.2.2 常用变量

3.2.3 常见问题

3.3 主题 Theme

3.3.1 导航排列

3.4 插件 Plugin

3.4.1 语法高亮 Pygments

3.4.2 评论插件

1. Disqus

2. Utterances

选择评论系统

3.4.3 统计分析：baidu/google

3.4.4 广告：baidu/alibaba/google/amazon

3.4.5 静态搜索

3.4.6 内容推荐：ujian

3.5 网站推广

3.5.1 站点地图：sitemap/roadmap

3.5.2 订阅：atom /rss

3.5.3 分享 share

1. 使用第三方分享插件

使用 ShareThis

2. 手动添加分享按钮

Twitter 分享按钮

Facebook 分享按钮

LinkedIn 分享按钮

3. 使用 Jekyll 插件

4. 自定义按钮样式

3.5.4 微博/微信公众号

1. 配置微博链接

添加微博图标链接

示例样式

2. 配置微信公众号

添加公众号二维码

示例样式

3. 确保信息准确

3.5.5 捐款：alipay/weixin

1. 设置支付二维码

2. 在 Jekyll 中添加捐款信息

示例：添加到 default.html 布局文件

3. 确保支付安全

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

示例：添加到 `default.html` 布局文件

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。