👉 English README | 简体中文说明

A Hugo theme component with layout projects and shortcodes to display GitHub pinned card style repositories.

• https://fixit.lruihao.cn/components/
• https://lruihao.cn/projects/

• FixIt v0.3.7 or higher

Clone FixIt and this git repository into your theme folder and add it as submodules of your website directory.

git submodule add https://github.com/hugo-fixit/FixIt.git themes/FixIt
git submodule add https://github.com/hugo-fixit/component-projects.git themes/component-projects

Next edit hugo.toml of your project and add this theme component to your themes:

theme = ["FixIt", "component-projects"]

Finally, inject the theme component's assets in layouts/partials/custom.html within the custom-head or custom-assets block:

{{- define "custom-assets" -}}
  {{- partial "inject/component-projects.html" . -}}
{{- end -}}

To learn about theme components of hugo and how to use them, check out https://gohugo.io/hugo-modules/theme-components/.

Obtaining repositories information relies on GitHub official API. Before starting to use it, it is recommended to generate personal access token on GitHub to prevent GitHub API usage limit.

1. Click to jump to GitHub Generate token, select the scope named public_repo to generate personal access token.
2. Configure with environment variable HUGO_PARAMS_GHTOKEN=your-person-access-token, see details in os.Getenv | Hugo

First, create the projects.yml file and edit your data:

cp themes/component-projects/projects.yml.example data/projects.yml

If your site is multilingual, you can create a projects.en.yml file for English and projects.zh-cn.yml for Chinese.

Next, create a new page with the projects layout:

hugo new projects/_index.md

Edit the front matter and content of the new page:

---
title: My Projects
titleIcon: fa-solid fa-laptop-code
subtitle: <https://github.com/Lruihao>
sectionSlot: Some text to display in the section slot which is above the related articles list.
layout: projects
---

Some text to display at the start of the page.

Use the gh-repo-card-container and gh-repo-card shortcodes in any page to display a GitHub repository card:

{{< gh-repo-card-container >}}
  {{< gh-repo-card repo="hugo-fixit/component-projects" >}}
  {{< gh-repo-card repo="Lruihao/hugo-blog" >}}
{{< /gh-repo-card-container >}}