Hagura 开源项目使用教程-CSDN博客

本文链接：https://blog.csdn.net/gitblog_00392/article/details/141551808

Hagura 开源项目使用教程

haguraA light weight, minimal Jekyll theme.项目地址:https://gitcode.com/gh_mirrors/ha/hagura

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

Hagura 是一个基于 Jekyll 的主题，适用于静态网站生成。以下是项目的目录结构及其介绍：

hagura/
├── _includes/         # 包含页面的各个部分，如头部、底部等
├── _layouts/          # 页面布局模板
├── _posts/            # 存放博客文章的目录
├── _sass/             # Sass 样式文件
├── assets/            # 静态资源文件，如图片、CSS、JavaScript 等
├── _config.yml        # 项目的配置文件
├── Gemfile            # Ruby 依赖管理文件
├── index.html         # 首页文件
└── README.md          # 项目说明文档

主要目录和文件介绍

_includes/: 包含页面的各个部分，如头部 (header.html)、底部 (footer.html) 等。
_layouts/: 页面布局模板，如默认布局 (default.html)、文章布局 (post.html) 等。
_posts/: 存放博客文章的目录，文章文件通常以 YYYY-MM-DD-title.md 格式命名。
_sass/: Sass 样式文件，用于定义网站的样式。
assets/: 静态资源文件，如图片 (images/)、CSS (css/)、JavaScript (js/) 等。
_config.yml: 项目的配置文件，包含网站的基本设置和配置。
Gemfile: Ruby 依赖管理文件，定义了项目所需的 Ruby 包。
index.html: 首页文件，网站的入口页面。
README.md: 项目说明文档，包含项目的介绍、使用方法等。

2. 项目的启动文件介绍

Hagura 项目的启动文件主要是 index.html 和 _config.yml。

`index.html`

index.html 是网站的首页文件，它定义了网站的入口页面。在这个文件中，你可以看到 Jekyll 的 Front Matter 部分，用于定义页面的变量和布局。

---
layout: default
---
<div class="home">
  {% if site.theme_settings.header_text %}
  <div class="call-box-top">
    {% include search.html %}
    <a href="{{ site.theme_settings.facebook_username | prepend: 'https://www.facebook.com/' }}" class="button"><i class="fa fa-facebook"></i> Facebook</a>
    <a href="{{ site.theme_settings.twitter_username | prepend: 'https://twitter.com/' }}" class="button"><i class="fa fa-twitter"></i> Twitter</a>
    <a href="{{ site.theme_settings.github_username | prepend: 'https://github.com/' }}" class="button"><i class="fa fa-github"></i> GitHub</a>
  </div>
  {% endif %}
  <div class="call-box-bottom">
    <a href="{{ site.baseurl }}/about" class="button">About</a>
  </div>
</div>

`_config.yml`

_config.yml 是 Jekyll 项目的配置文件，包含网站的基本设置和配置。以下是一些常见的配置项：

title: Hagura
description: A minimalist Jekyll theme for bloggers
baseurl: "" # the subpath of your site, e.g. /blog
url: "http://example.com" # the base hostname & protocol for your site

theme_settings:
  header_text: "Welcome to Hagura"
  facebook_username: your-username
  twitter_username: your-username
  github_username: your-username