mirror of
https://github.com/dillonzq/LoveIt.git
synced 2024-11-15 03:16:30 +01:00
820 lines
26 KiB
Markdown
820 lines
26 KiB
Markdown
---
|
||
weight: 1
|
||
title: "Theme Documentation - Basics"
|
||
subtitle: ""
|
||
date: 2020-03-06T21:29:01+08:00
|
||
lastmod: 2020-03-06T21:29:01+08:00
|
||
draft: false
|
||
author: "Dillon"
|
||
authorLink: "https://dillonzq.com"
|
||
description: "Discover what the Hugo - LoveIt theme is all about and the core-concepts behind it."
|
||
license: ""
|
||
|
||
tags: ["installation", "configuration"]
|
||
categories: ["documentation"]
|
||
hiddenFromHomePage: false
|
||
|
||
featuredImage: "/images/theme-documentation-basics/featured-image.jpg"
|
||
featuredImagePreview: ""
|
||
|
||
toc: true
|
||
autoCollapseToc: false
|
||
math: false
|
||
mapbox:
|
||
accessToken: ""
|
||
lightStyle: ""
|
||
darkStyle: ""
|
||
navigation: true
|
||
geolocate: true
|
||
scale: true
|
||
fullscreen: true
|
||
lightgallery: true
|
||
linkToMarkdown: true
|
||
share:
|
||
enable: true
|
||
comment: true
|
||
---
|
||
|
||
Discover what the Hugo - **LoveIt** theme is all about and the core-concepts behind it.
|
||
|
||
<!--more-->
|
||
|
||
## 1 Requirements
|
||
|
||
Thanks to the simplicity of Hugo, [Hugo](https://gohugo.io/) is the only dependency of this theme.
|
||
|
||
Just install latest version of [:(far fa-file-archive): Hugo extended (> 0.62.0)](https://gohugo.io/getting-started/installing/) for your OS (**Windows**, **Linux**, **macOS**).
|
||
|
||
{{< admonition note "Why not support earlier versions of Hugo?" >}}
|
||
Since [Markdown Render Hooks](https://gohugo.io/getting-started/configuration-markup/#markdown-render-hooks) was introduced in the [Hugo Christmas Edition](https://gohugo.io/news/0.62.0-relnotes/), this theme only supports Hugo versions above **0.62.0**.
|
||
{{< /admonition >}}
|
||
|
||
{{< admonition note "Why need the Hugo extended version?" >}}
|
||
Since this theme processes SCSS to CSS, Hugo needs to be the **extended** version.
|
||
{{< /admonition >}}
|
||
|
||
## 2 Installation
|
||
|
||
The following steps are here to help you initialize your new website. If you don’t know Hugo at all, we strongly suggest you learn more about it by following this [great documentation for beginners](https://gohugo.io/getting-started/quick-start/).
|
||
|
||
### 2.1 Create Your Project
|
||
|
||
Hugo provides a `new` command to create a new website:
|
||
|
||
```bash
|
||
hugo new site my_website
|
||
cd my_website
|
||
```
|
||
|
||
### 2.2 Install the Theme
|
||
|
||
The **LoveIt** theme’s repository is: [https://github.com/dillonzq/LoveIt](https://github.com/dillonzq/LoveIt).
|
||
|
||
You can download the [latest release :(far fa-file-archive): .zip file](https://github.com/dillonzq/LoveIt/releases) of the theme and extract it in the `themes` directory.
|
||
|
||
Alternatively, clone this repository to the `themes` directory:
|
||
|
||
```bash
|
||
git clone https://github.com/dillonzq/LoveIt.git themes/LoveIt
|
||
```
|
||
|
||
Or, create an empty git repository and make this repository a submodule of your site directory:
|
||
|
||
```bash
|
||
git init
|
||
git submodule add https://github.com/dillonzq/LoveIt.git themes/LoveIt
|
||
```
|
||
|
||
### 2.3 Basic Configuration {#basic-configuration}
|
||
|
||
The following is a basic configuration for the LoveIt theme:
|
||
|
||
```toml
|
||
baseURL = "http://example.org/"
|
||
# [en, zh-cn, fr, ...] determines default content language
|
||
defaultContentLanguage = "en"
|
||
# language code
|
||
languageCode = "en"
|
||
title = "My New Hugo Site"
|
||
|
||
# Change the default theme to be use when building the site with Hugo
|
||
theme = "LoveIt"
|
||
|
||
[params]
|
||
# LoveIt theme version
|
||
version = "0.1.X"
|
||
|
||
[menu]
|
||
[[menu.main]]
|
||
identifier = "posts"
|
||
# you can add extra information before the name (HTML format is supported), such as icons
|
||
pre = ""
|
||
name = "Posts"
|
||
url = "/posts/"
|
||
# title will be shown when you hover on this menu link
|
||
title = ""
|
||
weight = 1
|
||
[[menu.main]]
|
||
identifier = "tags"
|
||
pre = ""
|
||
name = "Tags"
|
||
url = "/tags/"
|
||
title = ""
|
||
weight = 2
|
||
[[menu.main]]
|
||
identifier = "categories"
|
||
pre = ""
|
||
name = "Categories"
|
||
url = "/categories/"
|
||
title = ""
|
||
weight = 3
|
||
```
|
||
|
||
{{< admonition >}}
|
||
When building the website, you can set a theme by using `--theme` option. However, we suggest you modify the configuration file (**config.toml**) and set the theme as the default.
|
||
{{< /admonition >}}
|
||
|
||
### 2.4 Create Your First Post
|
||
|
||
Here is the way to create your first post:
|
||
|
||
```bash
|
||
hugo new posts/first_post.md
|
||
```
|
||
|
||
Feel free to edit the post file by adding some sample content and replacing the title value in the beginning of the file.
|
||
|
||
{{< admonition >}}
|
||
By default all posts and pages are created as a draft. If you want to render these pages, remove the property `draft: true` from the metadata or set the property `draft: false`.
|
||
{{< /admonition >}}
|
||
|
||
### 2.5 Launching the Website Locally
|
||
|
||
Launch by using the following command:
|
||
|
||
```bash
|
||
hugo serve
|
||
```
|
||
|
||
Go to `http://localhost:1313`.
|
||
|
||
|
||
|
||
{{< admonition tip >}}
|
||
When you run `hugo serve`, when the contents of the files change, the page automatically refreshes with the changes.
|
||
{{< /admonition >}}
|
||
|
||
### 2.6 Build the Website
|
||
|
||
When your site is ready to deploy, run the following command:
|
||
|
||
```bash
|
||
hugo
|
||
```
|
||
|
||
A `public` folder will be generated, containing all static content and assets for your website. It can now be deployed on any web server.
|
||
|
||
{{< admonition tip >}}
|
||
The website can be automatically published and hosted with [Netlify](https://www.netlify.com/) (Read more about [Automated HUGO deployments with Netlify](https://www.netlify.com/blog/2015/07/30/hosting-hugo-on-netlifyinsanely-fast-deploys/)).
|
||
Alternatively, you can use [AWS Amplify](https://gohugo.io/hosting-and-deployment/hosting-on-aws-amplify/), [Github pages](https://gohugo.io/hosting-and-deployment/hosting-on-github/), [Render](https://gohugo.io/hosting-and-deployment/hosting-on-render/) and more...
|
||
{{< /admonition >}}
|
||
|
||
## 3 Configuration
|
||
|
||
### 3.1 Site Configuration {#site-configuration}
|
||
|
||
In addition to [Hugo global configuration](https://gohugo.io/overview/configuration/) and [menu configuration](#basic-configuration), **LoveIt** lets you define the following parameters in your site configuration (here is a `config.toml`, whose values are default).
|
||
|
||
{{< admonition >}}
|
||
Note that some of these parameters are explained in details in other sections of this documentation.
|
||
{{< /admonition >}}
|
||
|
||
```toml
|
||
[params]
|
||
# LoveIt theme version
|
||
version = "0.1.X"
|
||
# site description
|
||
description = "This is My New Hugo Site"
|
||
# site keywords
|
||
keywords = ["Theme", "Hugo"]
|
||
# site default theme ("light", "dark", "auto")
|
||
defaultTheme = "auto"
|
||
# public git repo url only then enableGitInfo is true
|
||
gitRepo = ""
|
||
# {{< version 0.1.1 >}} which hash function used for SRI, when empty, no SRI is used
|
||
# ("sha256", "sha384", "sha512", "md5")
|
||
fingerprint = ""
|
||
# {{< version 0.2.0 >}} Search
|
||
[params.search]
|
||
enable = true
|
||
# type of search engine ("lunr", "algolia")
|
||
type = "lunr"
|
||
# index length of the content
|
||
contentLength = 5000
|
||
[params.search.algolia]
|
||
index = ""
|
||
appID = ""
|
||
searchKey = ""
|
||
# Header info
|
||
[params.header]
|
||
# desktop header mode ("fixed", "normal", "auto")
|
||
desktopMode = "fixed"
|
||
# mobile header mode ("fixed", "normal", "auto")
|
||
mobileMode = "auto"
|
||
# Footer Copyright Info
|
||
[params.footer]
|
||
# Site creation time
|
||
since = 2019
|
||
# ICP info only in China (HTML format is supported)
|
||
icp = ""
|
||
# license info (HTML format is supported)
|
||
license = '<a rel="license external nofollow noopener noreffer" href="https://creativecommons.org/licenses/by-nc/4.0/" target="_blank">CC BY-NC 4.0</a>'
|
||
# Home Page Info
|
||
[params.home]
|
||
# Home Page Profile
|
||
[params.home.profile]
|
||
enable = true
|
||
# Gravatar Email for preferred avatar in home page
|
||
gravatarEmail = ""
|
||
# URL of avatar shown in home page
|
||
avatarURL = "/images/avatar.png"
|
||
# subtitle shown in home page
|
||
subtitle = "This is My New Hugo Site"
|
||
# whether to use typeit animation for subtitle
|
||
typeit = true
|
||
# whether to show social links
|
||
social = true
|
||
# {{< version 0.2.0 >}} disclaimer (HTML format is supported)
|
||
disclaimer = ""
|
||
# Home Page Posts
|
||
[params.home.posts]
|
||
enable = true
|
||
# special amount of posts in each home posts page
|
||
paginate = 6
|
||
# default behavior when you don't set "hiddenFromHomePage" in front matter
|
||
defaultHiddenFromHomePage = false
|
||
# Social Info in home page
|
||
[params.social]
|
||
GitHub = "xxxx"
|
||
Linkedin = "xxxx"
|
||
Twitter = "xxxx"
|
||
Instagram = "xxxx"
|
||
Email = "xxxx@xxxx.com"
|
||
Facebook = "xxxx"
|
||
Telegram = "xxxx"
|
||
# Medium = "xxxx"
|
||
# Gitlab = "xxxx"
|
||
Youtubelegacy = "xxxx"
|
||
# Youtubecustom = "xxxx"
|
||
# Youtubechannel = "xxxx"
|
||
# Tumblr ="xxxx"
|
||
# Quora = "xxxx"
|
||
# Keybase = "xxxx"
|
||
# Pinterest = "xxxx"
|
||
# Reddit = "xxxx"
|
||
# Codepen = "xxxx"
|
||
# FreeCodeCamp = "xxxx"
|
||
# Bitbucket = "xxxx"
|
||
# Stackoverflow = "xxxx"
|
||
# Weibo = "xxxx"
|
||
# Odnoklassniki = "xxxx"
|
||
# VK = "xxxx"
|
||
# Flickr = "xxxx"
|
||
# Xing = "xxxx"
|
||
# Snapchat = "xxxx"
|
||
# Soundcloud = "xxxx"
|
||
# Spotify = "xxxx"
|
||
# Bandcamp = "xxxx"
|
||
# Paypal = "xxxx"
|
||
# Fivehundredpx = "xxxx"
|
||
# Mix = "xxxx"
|
||
# Goodreads = "xxxx"
|
||
# Lastfm = "xxxx"
|
||
# Foursquare = "xxxx"
|
||
# Hackernews = "xxxx"
|
||
# Kickstarter = "xxxx"
|
||
# Patreon = "xxxx"
|
||
# Steam = "xxxx"
|
||
# Twitch = "xxxx"
|
||
# Strava = "xxxx"
|
||
# Skype = "xxxx"
|
||
# Whatsapp = "xxxx"
|
||
# Zhihu = "xxxx"
|
||
# Douban = "xxxx"
|
||
# Angellist = "xxxx"
|
||
# Slidershare = "xxxx"
|
||
# Jsfiddle = "xxxx"
|
||
# Deviantart = "xxxx"
|
||
# Behance = "xxxx"
|
||
# Dribble = "xxxx"
|
||
# Wordpress = "xxxx"
|
||
# Vine = "xxxx"
|
||
# Googlescholar = "xxxx"
|
||
# Researchgate = "xxxx"
|
||
# Mastodon = "xxxx"
|
||
# MastodonPrefix = "https://mastodon.technology/"
|
||
# Thingiverse = "xxxx"
|
||
# Devto = "xxxx"
|
||
# Gitea = "xxxx"
|
||
# XMPP = "xxxx"
|
||
# Matrix = "xxxx"
|
||
# Bilibili = "xxxx"
|
||
|
||
# Page config
|
||
[params.page]
|
||
# whether to use lightgallery in the page
|
||
lightgallery = true
|
||
# whether to show link to Raw Markdown content of the post
|
||
linkToMarkdown = true
|
||
# {{< link "https://katex.org/" KaTeX >}} mathematical formulas
|
||
[params.math]
|
||
enable = true
|
||
# default block delimiter is $$ ... $$ and \\[ ... \\]
|
||
blockLeftDelimiter = ""
|
||
blockRightDelimiter = ""
|
||
# default inline delimiter is $ ... $ and \\( ... \\)
|
||
inlineLeftDelimiter = ""
|
||
inlineRightDelimiter = ""
|
||
# KaTeX extension copy_tex
|
||
copyTex = true
|
||
# KaTeX extension mhchem
|
||
mhchem = true
|
||
# {{< version 0.2.0 >}} {{< link "https://docs.mapbox.com/mapbox-gl-js" "Mapbox GL JS" >}} config
|
||
[params.mapbox]
|
||
# access token of Mapbox GL JS
|
||
accessToken = ""
|
||
# style for the light theme
|
||
lightStyle = "mapbox://styles/mapbox/light-v9"
|
||
# style for the dark theme
|
||
darkStyle = "mapbox://styles/mapbox/dark-v9"
|
||
# whether to add {{< link "https://docs.mapbox.com/mapbox-gl-js/api/#navigationcontrol" NavigationControl >}}
|
||
navigation = true
|
||
# whether to add {{< link "https://docs.mapbox.com/mapbox-gl-js/api/#geolocatecontrol" GeolocateControl >}}
|
||
geolocate = true
|
||
# whether to add {{< link "https://docs.mapbox.com/mapbox-gl-js/api/#scalecontrol" ScaleControl >}}
|
||
scale = true
|
||
# whether to add {{< link "https://docs.mapbox.com/mapbox-gl-js/api/#fullscreencontrol" FullscreenControl >}}
|
||
fullscreen = true
|
||
# Social Share Links in post page
|
||
[params.share]
|
||
enable = true
|
||
Twitter = true
|
||
Facebook = true
|
||
Linkedin = true
|
||
Whatsapp = true
|
||
Pinterest = true
|
||
# Tumblr = true
|
||
HackerNews = true
|
||
# Reddit = true
|
||
# VK = true
|
||
# Buffer = true
|
||
# Xing = true
|
||
# Line = true
|
||
# Instapaper = true
|
||
# Pocket = true
|
||
# Digg = true
|
||
# Stumbleupon = true
|
||
# Flipboard = true
|
||
# Weibo = true
|
||
# Renren = true
|
||
# Myspace = true
|
||
# Blogger = true
|
||
# Baidu = true
|
||
# Odnoklassniki = true
|
||
# Evernote = true
|
||
# Skype = true
|
||
# Trello = true
|
||
# Mix = true
|
||
# Comment Config
|
||
[params.comment]
|
||
enable = true
|
||
# {{< link "https://disqus.com/" Disqus >}} Comment Config
|
||
[params.comment.disqus]
|
||
# {{< version 0.1.1 >}}
|
||
enable = false
|
||
# Disqus shortname to use Disqus in posts
|
||
shortname = ""
|
||
# {{< link "https://github.com/gitalk/gitalk" Gitalk >}} Comment Config
|
||
[params.comment.gitalk]
|
||
# {{< version 0.1.1 >}}
|
||
enable = false
|
||
owner = ""
|
||
repo = ""
|
||
clientId = ""
|
||
clientSecret = ""
|
||
# {{< link "https://github.com/xCss/Valine" Valine >}} Comment Config
|
||
[params.comment.valine]
|
||
enable = false
|
||
appId = ""
|
||
appKey = ""
|
||
placeholder = "Your comment ..."
|
||
notify = false
|
||
verify = true
|
||
avatar = "mp"
|
||
meta= ""
|
||
pageSize = 10
|
||
lang = "en"
|
||
visitor = true
|
||
recordIP = true
|
||
# {{< link "https://developers.facebook.com/docs/plugins/comments" "Facebook Comment" >}} Config
|
||
[params.comment.facebook]
|
||
enable = false
|
||
width = "100%"
|
||
numPosts = 10
|
||
appId = ""
|
||
languageCode = "en_US"
|
||
# {{< version 0.2.0 >}} {{< link "https://comments.app/" "Telegram Comments" >}} Config
|
||
[params.comment.telegram]
|
||
enable = false
|
||
siteID = ""
|
||
limit = 5
|
||
height = ""
|
||
color = ""
|
||
colorful = true
|
||
dislikes = false
|
||
outlined = false
|
||
|
||
# site verification code for Google/Bing/Yandex/Pinterest/Baidu
|
||
[params.verification]
|
||
google = ""
|
||
bing = ""
|
||
yandex = ""
|
||
pinterest = ""
|
||
baidu = ""
|
||
# Publisher Info just for SEO
|
||
[params.publisher]
|
||
name = "xxxx"
|
||
[params.publisher.logo]
|
||
url = "logo.png"
|
||
width = 127
|
||
height = 40
|
||
# Website Log Info just for SEO
|
||
[params.logo]
|
||
url = "logo.png"
|
||
width = 127
|
||
height = 40
|
||
# Website Image Info just for SEO
|
||
[params.image]
|
||
url = "cover.png"
|
||
width = 800
|
||
height = 600
|
||
# CSS and JS Files CDN
|
||
[params.cdn]
|
||
# {{< version 0.2.0 >}} {{< link "https://github.com/necolas/normalize.css" "normalize.css" >}}@8.0.1
|
||
normalizeCSS = ''
|
||
# {{< link "https://fontawesome.com/" "fontawesome-free" >}}@5.12.1
|
||
fontawesomeFreeCSS = ''
|
||
# animate.css@3.7.2 https://github.com/daneden/animate.css
|
||
animateCSS = ''
|
||
# {{< link "https://github.com/cferdinandi/smooth-scroll" "smooth-scroll" >}}@16.1.2
|
||
smoothScrollJS = ''
|
||
# {{< version 0.2.0 >}} {{< link "https://github.com/algolia/autocomplete.js" "autocomplete.js" >}}@0.37.1
|
||
autocompleteJS = ''
|
||
# {{< version 0.2.0 >}} {{< link "https://lunrjs.com/" "lunr.js" >}}@2.3.8
|
||
lunrJS = ''
|
||
# {{< version 0.2.0 >}} {{< link "https://github.com/algolia/algoliasearch-client-javascript" "algoliasearch" >}}@4.1.0
|
||
algoliasearchJS = ''
|
||
# {{< link "https://github.com/aFarkas/lazysizes" "lazysizes" >}}@5.2.0
|
||
lazysizesJS = ''
|
||
# {{< link "https://github.com/sachinchoolur/lightgallery.js" "lightgallery.js" >}}@1.1.3 lg-thumbnail@1.1.0 lg-zoom@1.1.0
|
||
lightgalleryCSS = ''
|
||
lightgalleryJS = ''
|
||
lightgalleryThumbnailJS = ''
|
||
lightgalleryZoomJS = ''
|
||
# {{< version 0.2.0 >}} {{< link "https://github.com/zenorocha/clipboard.js" "clipboard.js" >}}@2.0.6
|
||
clipboardJS = ''
|
||
# {{< link "https://github.com/ellisonleao/sharer.js" "sharer" >}}@0.4.0
|
||
sharerJS = ''
|
||
# {{< link "https://github.com/alexmacarthur/typeit" "typeit" >}}@6.5.1
|
||
typeitJS = ''
|
||
# {{< link "https://github.com/KaTeX/KaTeX" "katex" >}}@0.11.1
|
||
katexCSS = ''
|
||
katexJS = ''
|
||
katexAutoRenderJS = ''
|
||
katexCopyTexCSS = ''
|
||
katexCopyTexJS = ''
|
||
katexMhchemJS = ''
|
||
# {{< link "https://github.com/knsv/mermaid" "mermaid" >}}@8.4.8
|
||
mermaidJS = ''
|
||
# {{< link "https://echarts.apache.org/" "echarts" >}}@4.6.0
|
||
echartsJS = ''
|
||
echartsMacaronsJS = ''
|
||
# {{< version 0.2.0 >}} {{< link "https://docs.mapbox.com/mapbox-gl-js" mapbox-gl >}}@1.8.1
|
||
mapboxGLCSS = ''
|
||
mapboxGLJS = ''
|
||
# {{< link "https://github.com/MoePlayer/APlayer" "aplayer" >}}@1.10.1
|
||
aplayerCSS = ''
|
||
aplayerJS = ''
|
||
# {{< link "https://github.com/metowolf/MetingJS" "meting" >}}@2.0.1
|
||
metingJS = ''
|
||
# {{< link "https://github.com/gitalk/gitalk" "gitalk" >}}@1.6.2
|
||
gitalkCSS = ''
|
||
gitalkJS = ''
|
||
# {{< link "https://valine.js.org/" "valine" >}}@1.3.10
|
||
valineJS = ''
|
||
|
||
# Markup related configuration in Hugo
|
||
[markup]
|
||
# {{< link "https://gohugo.io/content-management/syntax-highlighting" "Syntax Highlighting" >}}
|
||
[markup.highlight]
|
||
codeFences = true
|
||
guessSyntax = true
|
||
lineNos = true
|
||
lineNumbersInTable = true
|
||
# false is a necessary configuration
|
||
# ({{< link "https://github.com/dillonzq/LoveIt/issues/158" >}})
|
||
noClasses = false
|
||
# Goldmark is from Hugo 0.60 the default library used for Markdown
|
||
[markup.goldmark]
|
||
[markup.goldmark.extensions]
|
||
definitionList = true
|
||
footnote = true
|
||
linkify = true
|
||
strikethrough = true
|
||
table = true
|
||
taskList = true
|
||
typographer = true
|
||
[markup.goldmark.renderer]
|
||
# whether to use HTML tags directly in the document
|
||
unsafe = true
|
||
# Table Of Contents settings
|
||
[markup.tableOfContents]
|
||
startLevel = 2
|
||
endLevel = 6
|
||
|
||
# Author Info
|
||
[author]
|
||
name = "xxxx"
|
||
link = ""
|
||
|
||
# Sitemap Info
|
||
[sitemap]
|
||
changefreq = "weekly"
|
||
filename = "sitemap.xml"
|
||
priority = 0.5
|
||
|
||
# {{< link "https://gohugo.io/content-management/urls/#permalinks" "Permalinks Info" >}}
|
||
[Permalinks]
|
||
# posts = ":year/:month/:filename"
|
||
posts = ":filename"
|
||
|
||
# {{< link "https://gohugo.io/about/hugo-and-gdpr/" "Privacy Info" >}}
|
||
[privacy]
|
||
[privacy.googleAnalytics]
|
||
anonymizeIP = true
|
||
|
||
[privacy.youtube]
|
||
privacyEnhanced = true
|
||
|
||
# Options to make output .md files
|
||
[mediaTypes]
|
||
[mediaTypes."text/plain"]
|
||
suffixes = ["md"]
|
||
|
||
# Options to make output .md files
|
||
[outputFormats.MarkDown]
|
||
mediaType = "text/plain"
|
||
isPlainText = true
|
||
isHTML = false
|
||
|
||
# Options to make hugo output files
|
||
[outputs]
|
||
# {{< version 0.2.0 changed >}}
|
||
home = ["HTML", "RSS", "JSON"]
|
||
page = ["HTML", "MarkDown"]
|
||
section = ["HTML", "RSS"]
|
||
taxonomy = ["HTML", "RSS"]
|
||
taxonomyTerm = ["HTML"]
|
||
```
|
||
|
||
{{< admonition tip "Tips about CDN Configuration" >}}
|
||
Full HTML tags or URLs are supported for CDN configuration:
|
||
|
||
```toml
|
||
smoothScrollJS = '<script src="https://cdn.jsdelivr.net/npm/smooth-scroll@16.1.3/dist/smooth-scroll.min.js" integrity="sha256-vP+F+14A1ogChQs5Osd5LJl/ci9TbzjiZjjEbcqOXrY=" crossorigin="anonymous"></script>'
|
||
# Or
|
||
smoothScrollJS = 'https://cdn.jsdelivr.net/npm/smooth-scroll@16/dist/smooth-scroll.min.js'
|
||
```
|
||
{{< /admonition >}}
|
||
|
||
|
||
|
||
### 3.2 Favicons, Browserconfig, Manifest
|
||
|
||
It is recommended to put your own favicons:
|
||
|
||
* apple-touch-icon.png (180x180)
|
||
* favicon-32x32.png (32x32)
|
||
* favicon-16x16.png (16x16)
|
||
* mstile-150x150.png (150x150)
|
||
* android-chrome-192x192.png (192x192)
|
||
* android-chrome-512x512.png (512x512)
|
||
|
||
into `/static`. They’re easily created via [https://realfavicongenerator.net/](https://realfavicongenerator.net/).
|
||
|
||
Customize `browserconfig.xml` and `site.webmanifest` to set theme-color and background-color.
|
||
|
||
### 3.3 Add Logo and Cover for SEO
|
||
|
||
Add a logo image (127x40) and a cover image (800x600) in the `static` directory.
|
||
|
||
### 3.4 Style Customization
|
||
|
||
**LoveIt** theme has been built to be as configurable as possible by defining custom `.scss` style files.
|
||
|
||
The directory including the custom `.scss` style files is `config/css` relative to **your project root directory**.
|
||
|
||
In `config/css/_override.scss`, you can override the variables in `themes/LoveIt/assets/css/_variables.scss` to customize the style.
|
||
|
||
Here is a example:
|
||
|
||
```scss
|
||
@import url('https://fonts.googleapis.com/css?family=Fira+Mono:400,700&display=swap&subset=latin-ext');
|
||
$code-font-family: Fira Mono, Source Code Pro, Menlo, Consolas, Monaco, monospace;
|
||
```
|
||
|
||
In `config/css/_custom.scss`, you can add some css style code to customize the style.
|
||
|
||
## 4 Multilingual and i18n
|
||
|
||
**LoveIt** theme is fully compatible with Hugo multilingual mode, which provides in-browser language switching.
|
||
|
||
|
||
|
||
### 4.1 Compatibility {#language-compatibility}
|
||
|
||
| Language | Hugo Code | HTML `lang` Attribute | Theme Docs | Lunr.js Support |
|
||
|:------------------ |:---------:|:---------------------:|:-----------------------:|:-----------------------:|
|
||
| English | `en` | `en` | :(far fa-check-square): | :(far fa-check-square): |
|
||
| Simplified Chinese | `zh-cn` | `zh-CN` | :(far fa-check-square): | :(far fa-check-square): |
|
||
| French | `fr` | `fr` | :(far fa-square): | :(far fa-check-square): |
|
||
| Polish | `pl` | `pl` | :(far fa-square): | :(far fa-square): |
|
||
|
||
:(far fa-kiss-wink-heart): **Feel free to [contribute](https://github.com/dillonzq/LoveIt/pulls)!**
|
||
|
||
### 4.2 Basic Configuration
|
||
|
||
After learning [how Hugo handle multilingual websites](https://gohugo.io/content-management/multilingual), define your languages in your [site configuration](#site-configuration).
|
||
|
||
For example with English, Chinese and French website:
|
||
|
||
```toml
|
||
# [en, zh-cn, fr, pl, ...] determines default content language
|
||
defaultContentLanguage = "en"
|
||
|
||
[languages]
|
||
[languages.en]
|
||
weight = 1
|
||
title = "My New Hugo Site"
|
||
languageCode = "en"
|
||
languageName = "English"
|
||
[[languages.en.menu.main]]
|
||
identifier = "posts"
|
||
pre = ""
|
||
name = "Posts"
|
||
url = "/posts/"
|
||
title = ""
|
||
weight = 1
|
||
[[languages.en.menu.main]]
|
||
identifier = "tags"
|
||
pre = ""
|
||
name = "Tags"
|
||
url = "/tags/"
|
||
title = ""
|
||
weight = 2
|
||
[[languages.en.menu.main]]
|
||
identifier = "categories"
|
||
pre = ""
|
||
name = "Categories"
|
||
url = "/categories/"
|
||
title = ""
|
||
weight = 3
|
||
|
||
[languages.zh-cn]
|
||
weight = 2
|
||
title = "我的全新 Hugo 网站"
|
||
# language code, CN only here
|
||
languageCode = "zh-CN"
|
||
languageName = "简体中文"
|
||
# whether to include Chinese/Japanese/Korean
|
||
hasCJKLanguage = true
|
||
[[languages.zh-cn.menu.main]]
|
||
identifier = "posts"
|
||
pre = ""
|
||
name = "文章"
|
||
url = "/posts/"
|
||
title = ""
|
||
weight = 1
|
||
[[languages.zh-cn.menu.main]]
|
||
identifier = "tags"
|
||
pre = ""
|
||
name = "标签"
|
||
url = "/tags/"
|
||
title = ""
|
||
weight = 2
|
||
[[languages.zh-cn.menu.main]]
|
||
identifier = "categories"
|
||
pre = ""
|
||
name = "分类"
|
||
url = "/categories/"
|
||
title = ""
|
||
weight = 3
|
||
|
||
[languages.fr]
|
||
weight = 3
|
||
title = "Mon nouveau site Hugo"
|
||
languageCode = "fr"
|
||
languageName = "Français"
|
||
[[languages.fr.menu.main]]
|
||
identifier = "posts"
|
||
pre = ""
|
||
name = "Postes"
|
||
url = "/posts/"
|
||
title = ""
|
||
weight = 1
|
||
[[languages.fr.menu.main]]
|
||
identifier = "tags"
|
||
pre = ""
|
||
name = "Balises"
|
||
url = "/tags/"
|
||
title = ""
|
||
weight = 2
|
||
[[languages.fr.menu.main]]
|
||
identifier = "categories"
|
||
name = "Catégories"
|
||
pre = ""
|
||
url = "/categories/"
|
||
title = ""
|
||
weight = 3
|
||
```
|
||
|
||
Then, for each new page, append the language code to the file name.
|
||
|
||
Single file `my-page.md` is split in three files:
|
||
|
||
* in English: `my-page.en.md`
|
||
* in Chinese: `my-page.zh-cn.md`
|
||
* in French: `my-page.fr.md`
|
||
|
||
{{< admonition >}}
|
||
Be aware that only translated pages are displayed in menu. It’s not replaced with default language content.
|
||
{{< /admonition >}}
|
||
|
||
{{< admonition tip >}}
|
||
Use [Front Matter parameter](https://gohugo.io/content-management/multilingual/#translate-your-content) to translate urls too.
|
||
{{< /admonition >}}
|
||
|
||
### 4.3 Overwrite Translation Strings
|
||
|
||
Translations strings are used for common default values used in the theme. Translations are available in [some languages](#language-compatibility), but you may use another language or want to override default values.
|
||
|
||
To override these values, create a new file in your local i18n folder `i18n/<languageCode>.toml` and inspire yourself from `themes/LoveIt/i18n/en.toml`.
|
||
|
||
By the way, as these translations could be used by other people, please take the time to propose a translation by [making a PR](https://github.com/dillonzq/LoveIt/pulls) to the theme!
|
||
|
||
## 5 Search
|
||
|
||
{{< version 0.2.0 >}}
|
||
|
||
Based on [Lunr.js](https://lunrjs.com/) or [algolia](https://www.algolia.com/), searching is supported in **LoveIt** theme.
|
||
|
||
### 5.1 Output Configuration
|
||
|
||
In order to generate `index.json` for searching, add `JSON` output file type to the `home` of the `outputs` part in your [site configuration](#site-configuration).
|
||
|
||
```toml
|
||
[outputs]
|
||
home = ["HTML", "RSS", "JSON"]
|
||
```
|
||
|
||
### 5.2 Search Configuration
|
||
|
||
Based on `index.json` generated by Hugo, you could activate searching.
|
||
|
||
Here is the search configuration in your [site configuration](#site-configuration):
|
||
|
||
```toml
|
||
[params.search]
|
||
enable = true
|
||
# type of search engine ("lunr", "algolia")
|
||
type = "lunr"
|
||
# index length of the content
|
||
contentLength = 5000
|
||
[params.search.algolia]
|
||
index = ""
|
||
appID = ""
|
||
searchKey = ""
|
||
```
|
||
|
||
{{< admonition note "How to choose the type of search engine?" >}}
|
||
* `lunr`: simple, no need to synchronize `index.json`, no limit for `contentLength`,
|
||
but high bandwidth and low performance (Especially for Chinese which needs a large segmentit library)
|
||
* `algolia`: high performance and low bandwidth, but need to synchronize `index.json` and limit for `contentLength`
|
||
{{< /admonition >}}
|
||
|
||
{{< admonition tip "Tips about algolia" >}}
|
||
You need to upload `index.json` files to algolia to activate searching.
|
||
You could upload the `index.json` files by browsers but a script may be a better choice.
|
||
To be compatible with Hugo multilingual mode,
|
||
you need to upload different `index.json` for each language to the different index of algolia, such as `zh-cn/index.json` or `fr/index.json`...
|
||
{{< /admonition >}}
|