Hugo 主题
Kaslaanka
kaslaanka 是一个为 Hugo 设计的极简主义主题
- 作者:Youssef Hesham
- GitHub Star:20
- 更新时间:2024-10-18
- 许可证:GPL-v3
- 标签:博客极简个人响应式
Kaslaanka
一个为 Hugo 设计的极简主义主题。
在线 演示地址:iossefy.github.io/kaslaanka
这个主题是 Hugo-tanka 主题的一个分支。
这个主题是一个“自己动手”的主题,您可能需要更改 CSS 以使其符合您的品味,使用 `custom.css` 来进行更改。
描述
- 极简主义主题
- 易于自定义
- 易于设置
- 不需要任何 JavaScript(JavaScript 是可选的)
- 可以作为博客或/和个人网站使用
- 为您提供发挥创造力的空间
新功能
- 删除臃肿的部分(utterances 评论、渐进式加载、highlight.js)
- 默认情况下不使用脚本。
- 移除了 Bootstrap。
- 更改了首页、单页和博客文章的外观。
- 首页上的博客列表是有限的,如果用户想查看更多,他们可以访问 /blog/
- 在首页上列出项目。
- 在首页上简要介绍我。
- 支持未列出的文章。
- 更好的网站图标。
- 更好的标签
- 添加分类
- 添加多语言支持
- 巨大的首字母段落(如果您需要)
- 博客文章标题下的简短描述
安装
使用设置指南安装 Hugo。
创建一个新的 Hugo 站点
hugo new site .
将主题添加到您的 Hugo 站点
# first initialise your repository with git
git init
# then fetch the theme and put it inside themes/ directory
git submodule add https://github.com/Iossefy/kaslaanka.git themes/kaslaanka
通过在您的配置(`config.toml`)文件中添加以下行来使用主题
theme = 'kaslaanka'
为了让您的站点准备就绪,请将以下参数添加到您的配置中
[params]
sitename = "Kaslaanka Theme"
copyrights = "John Doe"
defaultList = "global"
paginationLen = 3
projectsURL = "https://example.com"
brief_about = "<center>Kaslaanka theme demo made with ❤️️</center>"
在您的终端中运行此命令以查看进度
hugo serve
它通常在 `https://127.0.0.1:1313/` 上提供服务。现在您已经完成了一半。
让我们将一些很棒的项目添加到主页。在 `[params]` 下添加以下内容
[[params.myprojects]]
name = "Totally Awesome Project"
description = "Machine Learning Magic!!!"
url = "https://example.com"
[[params.myprojects]]
name = "Kaslaanka"
description = "The best hugo theme ever!!!"
url = "https://github.com/Iossefy/kaslaanka"
让我们添加一些导航链接
[[menu.primary]]
name = "Home"
url = "/"
weight = 1
[[menu.primary]]
name = "About"
url = "/about"
weight = 2
[[menu.primary]]
name = "Subscribe"
url = "/index.xml"
weight = 3
现在您已完成主题的安装。阅读 Hugo 的文档并继续您的旅程。我将使用 `yaml` 来编写剩余的 README,它们之间的转换很容易,只需使用您喜欢的任何方式。查看带有注释的 config.yml。
您应该查看 `exampleSite/`。不要完全复制它,`layouts/blog/` 中使用了一些变通方法来部署在 github 页面上,请忽略它。
自定义
custom.css
在此处添加您的自定义 CSS:`/static/css/custom.css`
/* <span class="first-letter">H</span>ello World! */
.first-letter {
font-family: "Roboto Serif";
}
custom.js
在此处添加您的自定义 JavaScript:`/static/js/custom.js`
// be creative
for(;;){alert("HAHAHAHAHAH")}
外部脚本
您可以在 `/layouts/partials/scripts.html` 中添加外部脚本
<script src="..." ... ></script>
meta & link 标签
您可以在 `/layouts/partials/meta.html` 中添加任意多的 `<meta>` 和 `<link>`
标签
tags:
- hello
- ok
这篇文章将被列在 /tags/hello/ 和 /tags/ok/ 中
分类
categories:
- travel
这篇文章将被列在 /categories/travel/ 中
config.yml
sitename: "Site Name!"
baseURL: "/"
languageCode: en-us
title: "Kaslaanka Theme"
author: John Doe
enableEmoji: true
hasCJKLanguage: false
# You can change code highlight theme
pygmentsstyle: "tango"
pygmentscodefences: true
# if you want to add html to your markdown
markup:
goldmark:
renderer:
unsafe: true
# Links of the navbar
menu:
primary:
- name: Home
url: /
weight: 1
- name: About
url: /about
weight: 2
- name: Subscribe
url: /index.xml
weight: 3
# You can add languages!
# do not expect it to work out of the box
# https://gohugo.com.cn/content-management/multilingual/
defaultContentLanguage: en
languages:
en:
LanguageName: English
# contentDir: content/english
ru:
LanguageName: русский
# contentDir: content/russian
params:
sitename: "Kaslaanka Theme"
# it will produce: copyrights (c) 2022 joe
copyrights: John Doe
# set default homepage list (what section to list pages from)
# default: global
# currently available options (global, blog)
defaultList: global
# list 3 items of every section
# you can use a section specific list
# to list n items of that section.
# see ./layouts/partials/bloglist.html for example
paginationLen: 3
# path to the favicon directory
# see ./layouts/_defaults/baseof.html line #30 to line #37
# faviconpath: "/img/favicon"
# projects will show in the index page
myprojects:
- name: "Totally Awesome Project"
description: "Machine Learning Magic!!!"
url: https://example.com
- name: "Kaslaanka"
description: "The best hugo theme ever!!!"
url: https://github.com/Iossefy/kaslaanka
# link to more projects
# show your github repositories as example
# or create your own page.
projectsURL: https://example.com
# a brief about me
brief_about: <center>Kaslaanka theme demo made with ❤️️</center>
# and don't forget
theme: kaslaanka
config.toml
sitename = "Site Name!"
baseURL = "/"
languageCode = "en-us"
title = "Kaslaanka Theme"
author = "John Doe"
enableEmoji = true
hasCJKLanguage = false
pygmentsstyle = "tango"
pygmentscodefences = true
defaultContentLanguage = "en"
theme = "kaslaanka"
[markup.goldmark.renderer]
unsafe = true
[[menu.primary]]
name = "Home"
url = "/"
weight = 1
[[menu.primary]]
name = "About"
url = "/about"
weight = 2
[[menu.primary]]
name = "Subscribe"
url = "/index.xml"
weight = 3
[languages.en]
LanguageName = "English"
[languages.ru]
LanguageName = "русский"
[params]
sitename = "Kaslaanka Theme"
copyrights = "John Doe"
defaultList = "global"
paginationLen = 3
projectsURL = "https://example.com"
brief_about = "<center>Kaslaanka theme demo made with ❤️️</center>"
[[params.myprojects]]
name = "Totally Awesome Project"
description = "Machine Learning Magic!!!"
url = "https://example.com"
[[params.myprojects]]
name = "Kaslaanka"
description = "The best hugo theme ever!!!"
url = "https://github.com/Iossefy/kaslaanka"
文章
您可以通过添加以下内容来使文章不被列出
---
unlisted: true
---
为单个博客页面添加简短描述。
---
brief: "This is my demo brief!"
---
如果要添加编辑计数器,请查看前言中的 `edit`。每次编辑文章时都会递增它。其中 `3` 是编辑次数。
---
edits: 3
---
许可证
GPL-3.0 许可证。