Hugo 主题
Ficurinia
一个为 Hugo 准备的多刺博客主题
演示
演示网站的代码(实际上是我个人的网站)
屏幕截图库,展示 Ficurinia 提供的 256 种可能的配置。
自定义
配置
这些是一些您可以在 config.toml
中使用的参数,以自定义 Ficurinia
baseURL = "https://example.com/"
theme = "hugo-ficurinia"
title = "My nice blog"
languageCode = "en"
defaultContentLanguage = "en"
# this will be included in the footer after the current year the site is last
# built, followed by the (c) symbol
# you can use markdown inside this field
copyright = "Some copyright notice - [my license](https://example.com/license)"
paginate = 5 # number of articles per page in the index
summaryLength = 70 # number of words for article summaries
[params]
author = "Gabriele Musco"
description = "A description for my website" # this will be added as metadata
posts = "posts" # content directory where to find home page posts; default searches in "posts" and "post"
showPostsLink = true # show or hide the link to the simple post list
extraContentDirs = [] # other content directories to render similarly to the home page
showcaseDir = "showcase" # create a content directory that shows a special showcase section in the home page
# shows a specified single page as a home page, instead of the traditional articles list
# requires setting `homeSinglePage`
# goes well with extraContentDirs
showSinglePageAsHome = false
homeSinglePage = "/home"
# It's best to put these icons in the "static" folder of your site
logo = "/logo.svg"
favicon = "/favicon.png" # 32x32
faviconIco = "/favicon.ico" # 32x32
appletouch = "/apple-touch-icon.png" # 180x180
svgicon = "/logo.svg"
icon512 = "/icon512.png" # 512x512 png image
logoRightOfTitle = false # positions the logo to the right of the title; default: false
showTags = true # show the Tags menu item; default true
showRss = true # show the link for the RSS feed; default true
imageInArticlePreview = false # show images in article preview; default false
fitImageInArticlePreview = false # make article preview images fit the article preview instead of getting cropped
articleSummary = true # show a summary in article preview; default true
fontFamily = "JetBrains Mono" # changes the font, default "JetBrains Mono"
titleFontFamily = "JetBrains Mono" # font used for titles and headings
monospaceFontFamily = "JetBrains Mono" # changes the monospace font for code, default "JetBrains Mono"
# multipliers applied to font sizes, useful for custom fonts that may be too big or too small
titleFontSizeMultiplier = 1.0
mainFontSizeMultiplier = 1.0
monoFontSizeMultiplier = 1.0
contentWidth = "1000px" # maximum width of the site content, css syntax
paperCards = false # enable paper card style; default false
buttonTags = false # enable button tag style; default false
tagsInArticlePreview = true # enable tags list in the article preview card
gridView = false # show post list as a grid. goes well with paperCards
bigArticleTitle = false # makes the title in the single article view bigger
navtype = "standard" # changes the style of the pagination, available styles are: "standard", "circles"
enableShadow = false # shows a shadow around some elements
menuStyle = "standard" # changes the style of the main site navigation menu, available styles are: "standard", "buttons"
inputStyle = "standard" # changes the style of inputs (like the searchbar), available styles are: "standard", "buttons"
enableSearch = true # enable search page
searchbarEverywhere = true # if the searchbar should be shown in every page; requires enableSearch
searchMenuLink = false # add a search link to the navigation menu; requires enableSearch
mobileHamburgerNav = false # alternative hamburger menu layout for the main nav menu when screen is small
enableFeatured = false # enable a particular view for articles marked as featured (featured: true in the article frontmatter)
underlineTitleLinks = false # show an underline also for links that are titles
# enable comments support with commento using the script from your server
commento = "https://example.com/js/commento.js"
# enable comments support with cactus comments (cactus.chat)
cactusCommentsSiteName = "example.com"
cactusCommentsServerName = "cactus.chat"
cactusCommentsHomeserver = "https://matrix.cactus.chat:8448"
# enable analytics using Plausible
plausibleScriptUrl = "https://something.com/..."
plausibleDomain = "example.com"
# enable analytics using Umami
umamiScriptUrl = "https://something.com/..."
umamiWebsiteId = "example-tracking-code"
enableShareOnFediverse = false # enable a button at the end of an article to share it on the fediverse
tocBeforeImage = false # show the table of contents before the main article image; default false
# WARNING: deprecated! Use [[menu.icons]] instead, look below
# links = [
# ["GitLab", "https://gitlab.com/gabmus"],
# ["GNOME", "https://gitlab.gnome.org/gabmus"],
# ["YouTube", "https://youtube.com/TechPillsNet"]
# ]
# you can customize all of the colors in this theme
# Colors are defined in data/colors.yml
# alternative sidebar layout
enableSidebarLayout = false
tocInSidebar = false # if the sidebar is enbabled, show the TOC in the sidebar
# redirect to baseURL if current URL host doesn't match
# useful if deploying in gitlab pages with custom domain and don't want
# the username.gitlab.io/website url to persist
# this requires you to set baseURL (see above)
forceRedirect = false
infiniteScrolling = false # activates infinite scrolling instead of regular pagination
# NOTE: you need to enable JSON output for this to work!
# look at the [outputs] section below
enableFooterColumns = false # activates footer columns, as described below
enableJumbotron = false # enables jumbotron, as described below
# related articles will be selected randomly based on tags and shown at
# the bottom of the article, after the comments
enableRelatedArticles = false
relatedArticlesNum = 2 # how many related articles to show
randomRelated = false # sorts related articles in random order (randomized at built time)
[menu]
# these links will be added to the main navigation menu, sorted by weight
# other elements in this menu are added automatically from the "pages" folder
# the folder it will look into can be customized with the pages variable
# in params above
[[menu.main]]
identifier = "about"
name = "About"
url = "/about/"
weight = 10
# these links (menu.icons) will be added as icon links below the main nav
[[menu.icons]]
identifier = "gitlab"
name = "GitLab"
url = "https://gitlab.com/gabmus"
weight = 10
[[menu.icons]]
identifier = "gnome"
name = "GNOME GitLab"
url = "https://gitlab.gnome.org/gabmus"
weight = 20
# this section is necessary if you want infinite scrolling
# it allows to output the article list as paged JSON so that "pages" can be retrieved via javascript
[outputs]
home = ["HTML", "JSON"]
支持的图标
对于 [[menu.icons]]
菜单。它们匹配的标识符、名称和 URL 可以是任何内容。以下是支持的标识符列表
- discord
- github
- gitlab
- gnome
- mastodon
- matrix
- peertube
- phone
- pleroma
- rss
- steam
- telegram
- xmpp
- youtube
颜色
颜色是完全可定制的。它们在 data/colors.yml
中定义。只需将该文件复制到 yoursite/data/colors.yml
并根据您的喜好进行自定义。
页脚列
您可以使用 data/footer_columns.yml
文件在页脚中添加各种链接列。
以下是一个配置示例
- title: My other projects
links:
- title: HydraPaper
link: https://hydrapaper.gabmus.org
- title: Ada UI
link: https://gitlab.com/gabmus/ada-ui
- title: About me
links:
- title: My personal website
link: https://gabmus.org
- title: My GitLab
link: https://gitlab.com/gabmus
- title: My GNOME GitLab
link: https://gitlab.gnome.org/gabmus
巨幕
您可以使用 data/jumbotron.yml
文件在主页的开头添加一个巨幕。
以下是一个配置示例
title: My awesome website
hugeTitle: false
subtitle: Some fancy subtitle
image: /jumbotron_image.svg
imagePosition: left # values: left, right, top, bottom
background: /img/jumbotron_bg.png
backgroundVideo: /jumbotron_video.mp4 # will replace the background image
# it's best to provide both an mp4 and a web source for the video for better compatibility
backgroundVideoMp4: /jumbotron_video.mp4
backgroundVideoWebm: /jumbotron_video.webm
videoOpacity: 1.0
textShadow: false
fullscreen: false
downArrow: false
whiteText: false # force white text in the jumbotron
links:
- title: About me
link: /pages/about
- title: Read my blog
link: /posts
帖子参数
每个帖子在 frontmatter 中都可以有各种参数,以下是一些您可能会觉得有用的参数
title
:文章的标题date
:通常会自动填充,保存帖子创建的日期和时间lastmod
:如果设置,将与原始日期一起显示,以表示帖子上次更新的时间description
:帖子的简短描述,对 SEO 优化很有用tags
:标签数组,用于搜索类似文章image
:文章的特色图像的链接,也会在预览中显示alt
:如果图像不可用或下载失败时显示的替代文本imageCaption
:以 Markdown 文本呈现的上述文章图像的标题featured
:布尔值,指示该帖子是否应显示为精选comments
:布尔值,如果为 true,则为当前帖子启用评论,如果为 false,则禁用评论(默认为 true)showDate
:布尔值,默认为 true,如果为 false,则隐藏日期。对于日期不重要的非文章页面很有用showTitle
:布尔值,默认为 true,如果为 false,则隐藏标题。showShare
:布尔值,默认为 true,如果为 false,则隐藏共享按钮。norss
:布尔值,如果设置为 true,则页面将在 RSS 源中跳过nosearch
:布尔值,如果设置为 true,则页面不会出现在搜索中toc
:布尔值,如果设置为 true,则将显示文章的目录
目录设置
您可以在 config.toml
中调整目录设置
[markup]
[markup.tableOfContents]
endLevel = 5
ordered = false
startLevel = 1
生成图标
最好使用提供的 generate_icons.sh
脚本来生成网站的所有必要图标。此脚本需要 ImageMagick,您需要单独安装。
为了获得最佳效果,请将您的徽标以 svg 格式放置在网站的 static
目录中,将其重命名为 logo.svg
,然后调用 ./themes/hugo-ficurinia/generate_icons.sh static/logo.svg
。
该脚本将负责生成您需要的所有图标。
最后,请确保编辑您的 config.toml 以包含以下内容
# ...
[params]
logo = "/logo.svg"
logoAltText = "Logo"
favicon = "/favicon.png"
faviconIco = "/favicon.ico"
appletouch = "/apple-touch-icon.png"
svgicon = "/logo.svg"
# ...
注入自定义内容
Ficurinia 支持将自定义内容注入到主题中。您可以在 layouts/partials/inject
中创建几个文件,这些文件将包含在主题中的不同位置。
Partial | 位置 |
---|---|
layouts/partials/inject/body.html | 在关闭 body 标签之前 |
layouts/partials/inject/content-after.html | 在帖子或页面内容之后 |
layouts/partials/inject/content-before.html | 在帖子或页面内容之前 |
layouts/partials/inject/footer.html | 在页脚的开头 |
layouts/partials/inject/head.html | 在关闭 head 标签之前 |
layouts/partials/inject/header-after.html | 在关闭标题之前 |
layouts/partials/inject/header-before.html | 在标题的开头 |
Ficurinia 有什么含义吗?
它是西西里语中仙人掌果的意思,也称为刺梨仙人掌。