Hugo 主题

上一页/下一页: 所有主题

iTheme

一个苹果风格的主题

下载
iTheme

适用于 Hugo 的 iTheme 主题

如果你喜欢这个主题，请给我一个 star!

clones clones per week

介绍

中文说明

一个为 Hugo 打造的苹果风格主题，灵感来自 astro-air-blog

预览

演示站点

快速开始

在开始之前，请确保你已经安装了 Hugo。

使用演示站点快速开始

这是演示站点的仓库

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

然后你可以访问 https://#:1313 查看演示站点！

为已存在的站点使用主题 

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

然后你需要向 config.toml 添加一些配置，请按照站点配置进行操作。

截图

screenshot

特性

  • 文章的浅色和深色模式
  • 文章中图片的三种不同尺寸
  • i18n 支持 (目前仅支持 en 和 zh-hans，非常需要贡献翻译)
  • Algolia 搜索集成
  • 自定义 JavaScript/CSS 支持 (你可以将这些文件放在 static/ 目录中)

配置

站点配置 

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 = 'floyd.li@outlook.com' # the email address display in the footer
  [params.algolia] # Algolia search configuration
    enabled = true # enable Algolia search
    appId = 'YOUR_KEY' # appid for Algolia search
    appKey = 'YOUR_APP_KEY' # appkey for Algolia search
    searchIndex = 'YOUR_INDEX' # index for Algolia search
  [[params.css]] # custom css stylesheet, you can add one or more, url is relative in 'static' folder
    url = 'css1.css'
  [[params.css]]
    url = 'css2.css'
  [[params.js]] # custom javascript, you can add one or more, url is relative in 'static' folder
    url = 'js1.js'
  [[params.js]]
    url = 'js2.js'
  [[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/'

文章配置 

---
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
---

图片的三种显示模式

图片的三种显示模式是：inline、big、wide，你可以访问演示站点进行预览。当你编辑 markdown 文件时，你可以将 inline、big 或 wide 添加到图片的 alt 中，像这样

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

分隔符是 |，默认模式是 big。

另请参阅