uBuild Jekyll 主题使用教程-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00994/article/details/141585934

uBuild Jekyll 主题使用教程

ubuild-jekyllA Jekyll theme designed to work with Forestry Blocks项目地址:https://gitcode.com/gh_mirrors/ub/ubuild-jekyll

1. 项目的目录结构及介绍

uBuild Jekyll 主题的目录结构如下：

ubuild-jekyll/
├── _config.yml
├── _data/
├── _includes/
├── _layouts/
├── _plugins/
├── _posts/
├── _sass/
├── assets/
├── blocks/
├── css/
├── images/
├── js/
├── index.html
└── README.md

目录介绍：

_config.yml: 项目的配置文件。
_data/: 存储数据文件，如导航菜单等。
_includes/: 存储可重用的 HTML 片段。
_layouts/: 存储页面布局模板。
_plugins/: 存储 Jekyll 插件。
_posts/: 存储博客文章。
_sass/: 存储 Sass 样式文件。
assets/: 存储静态资源文件，如字体、图片等。
blocks/: 存储页面设计块。
css/: 存储 CSS 样式文件。
images/: 存储图片文件。
js/: 存储 JavaScript 文件。
index.html: 项目的主页文件。
README.md: 项目的说明文档。

2. 项目的启动文件介绍

uBuild Jekyll 主题的启动文件是 index.html。这个文件是项目的入口点，负责加载和显示主页内容。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>uBuild Jekyll Theme</title>
    <link rel="stylesheet" href="css/main.css">
  </head>
  <body>
    {% include header.html %}
    <main>
      {% include blocks/block-name.html %}
    </main>
    {% include footer.html %}
    <script src="js/main.js"></script>
  </body>
</html>

文件介绍：

<head> 部分包含了页面的元数据和样式文件的链接。
<body> 部分包含了页面的主要内容，包括头部 (header.html)、主体内容 (blocks/block-name.html) 和底部 (footer.html)。
<script> 标签用于加载 JavaScript 文件。

3. 项目的配置文件介绍

uBuild Jekyll 主题的配置文件是 _config.yml。这个文件包含了项目的全局配置信息。

title: uBuild Jekyll Theme
description: A Jekyll theme designed to work with Forestry Blocks
baseurl: ""
url: "https://example.com"

markdown: kramdown
theme: minima
plugins:
  - jekyll-feed
  - jekyll-seo-tag

collections:
  blocks:
    output: true

defaults:
  - scope:
      path: ""
      type: "blocks"
    values:
      layout: "block"