Introduce March 25, 2023

iTheme for Hugo

an introduce for iTheme

Introduce Demo

If you like this theme, please give me a star!

Introduction

中文说明

An Apple style theme for Hugo, inspired by astro-air-blog

Preview

Demo Site

Quick Start

Before you start, make sure you have installed Hugo.

Quick start with the demo site

Here’s the demo site repo

git clone --recurse-submodules https://github.com/floyd-li/itheme-demo-site.git my-site
cd ./my-site && hugo server -D

Then you can visit http://localhost:1313 to see the demo site!

Use the theme for existed site

git submodule add https://github.com/floyd-li/hugo-theme-itheme.git themes/hugo-theme-itheme
echo "theme = 'hugo-theme-itheme'" >> config.toml

Then you need to add some configuration to config.toml, please flow the Site Configuration.

Screenshot

Features

Light and Dark mode for post
Three different sizes for images in the post
i18n support (currently only support en and zh-hans, there is a great need for contributing translation)

Configuration

Site Configuration

defaultContentLanguage = "en" # current only supported 'en' and 'zh-hans', see the 'i18n' folder
[params]
  defaultCover = 'https://example.com/cover.jpg' # default cover image for post not setting cover
  email = '[email protected]' # the email address display in the footer
  [[params.socialMedia]] # custom social links display in the footer, you can add one or more
    name = 'Github'
    url = 'https://github.com/floyd-li'
  [[params.socialMedia]]
    name = 'Twitter'
    url = 'https://twitter.com/some-one'
  [[params.blogroll]] # blogroll links display in the footer, you can add one or more
    name = 'Apple'
    url = 'https://Apple.com/'
  [[params.blogroll]]
    name = 'Google'
    url = 'https://Google.com/'

Post Configuration

---
title: 'Some Article'
date: '2022-10-27T13:06:38+08:00'
draft: true
description: 'some description of the article'
author: 'author of this article'
cover: 'https://example.com/cover.jpg' // if not set cover, it will use the 'defaultCover' in site configuration
tags: ["tag1", "tag2", "tag3"]
theme: "dark" // you can set 'light' or 'dark' here
---

Three display modes of images

The three display modes of images are: inline, big, wide, you can visit the demo site for preview When you edit your markdown file, you can add inline, big or wide to the image alt, like this:

![alt content|wide](a.png)

The Separator is |, and the default mode is big.

Author: Floyd Li

Posted on: March 25, 2023