MeiCongTheme Documentation - Basics
Contents
Discover what the Hugo - LoveIt theme is all about and the core-concepts behind it.
1 Requirements
Thanks to the simplicity of Hugo, Hugo is the only dependency of this theme.
Just install latest version of Hugo (> 0.62.0) for your OS (Windows, Linux, macOS).
Why not support earlier versions of Hugo?
Since Markdown Render Hooks was introduced in the Hugo Christmas Edition, this theme only supports Hugo versions above 0.62.0.
Hugo extended version is recommended
Since some features of this theme need to processes SCSS to CSS, it is recommended to use Hugo extended version for better experience.
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.
2.1 Create Your Project
Hugo provides a new command to create a new website:
1hugo new site my_website
2cd my_website
2.2 Install the Theme
The LoveIt theme’s repository is: https://github.com/dillonzq/LoveIt.
You can download the latest release .zip file of the theme and extract it in the themes directory.
Alternatively, clone this repository to the themes directory:
1git 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:
1git init
2git submodule add https://github.com/dillonzq/LoveIt.git themes/LoveIt
2.3 Basic Configuration
The following is a basic configuration for the LoveIt theme:
1baseURL = "http://example.org/"
2# [en, zh-cn, fr, ...] determines default content language
3defaultContentLanguage = "en"
4# language code
5languageCode = "en"
6title = "My New Hugo Site"
7
8# Change the default theme to be use when building the site with Hugo
9theme = "LoveIt"
10
11[params]
12 # LoveIt theme version
13 version = "0.2.X"
14
15[menu]
16 [[menu.main]]
17 identifier = "posts"
18 # you can add extra information before the name (HTML format is supported), such as icons
19 pre = ""
20 # you can add extra information after the name (HTML format is supported), such as icons
21 post = ""
22 name = "Posts"
23 url = "/posts/"
24 # title will be shown when you hover on this menu link
25 title = ""
26 weight = 1
27 [[menu.main]]
28 identifier = "tags"
29 pre = ""
30 post = ""
31 name = "Tags"
32 url = "/tags/"
33 title = ""
34 weight = 2
35 [[menu.main]]
36 identifier = "categories"
37 pre = ""
38 post = ""
39 name = "Categories"
40 url = "/categories/"
41 title = ""
42 weight = 3
43
44# Markup related configuration in Hugo
45[markup]
46 # Syntax Highlighting (https://gohugo.io/content-management/syntax-highlighting)
47 [markup.highlight]
48 # false is a necessary configuration (https://github.com/dillonzq/LoveIt/issues/158)
49 noClasses = false
Note
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.2.4 Create Your First Post
Here is the way to create your first post:
1hugo 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.
Note
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, set the property draft: false or add -D/--buildDrafts parameter to hugo command.2.5 Launching the Website Locally
Launch by using the following command:
1hugo serve
Go to http://localhost:1313.
Tip
When you run
hugo serve, when the contents of the files change, the page automatically refreshes with the changes.
Note
Since the theme use .Scratch in Hugo to implement some features,
it is highly recommended that you add --disableFastRender parameter to hugo server command for the live preview of the page you are editing.
1hugo serve --disableFastRender
2.6 Build the Website
When your site is ready to deploy, run the following command:
1hugo
A public folder will be generated, containing all static content and assets for your website. It can now be deployed on any web server.
Tip
The website can be automatically published and hosted with Netlify (Read more about Automated HUGO deployments with Netlify).
Alternatively, you can use AWS Amplify, Github pages, Render and more…
3 Configuration
3.1 Site Configuration
In addition to Hugo global configuration and menu configuration, LoveIt lets you define the following parameters in your site configuration (here is a config.toml, whose values are default).
Please open the code block below to view the complete sample configuration :
1[params]
2 # 
LoveIt theme version
3 version = "0.2.X"
4 # site description
5 description = "This is My New Hugo Site"
6 # site keywords
7 keywords = ["Theme", "Hugo"]
8 # site default theme ("light", "dark", "auto")
9 defaultTheme = "auto"
10 # public git repo url only then enableGitInfo is true
11 gitRepo = ""
12 # which hash function used for SRI, when empty, no SRI is used
13 # ("sha256", "sha384", "sha512", "md5")
14 fingerprint = ""
15 # date format
16 dateFormat = "2006-01-02"
17 # website images for Open Graph and Twitter Cards
18 images = ["/logo.png"]
19
20 # App icon config
21 [params.app]
22 # optional site title override for the app when added to an iOS home screen or Android launcher
23 title = "LoveIt"
24 # whether to omit favicon resource links
25 noFavicon = false
26 # modern SVG favicon to use in place of older style .png and .ico files
27 svgFavicon = ""
28 # Android browser theme color
29 themeColor = "#ffffff"
30 # Safari mask icon color
31 iconColor = "#5bbad5"
32 # Windows v8-10 tile color
33 tileColor = "#da532c"
34
35 # Search config
36 [params.search]
37 enable = true
38 # type of search engine ("lunr", "algolia")
39 type = "lunr"
40 # max index length of the chunked content
41 contentLength = 4000
42 # placeholder of the search bar
43 placeholder = ""
44 # max number of results length
45 maxResultLength = 10
46 # snippet length of the result
47 snippetLength = 30
48 # HTML tag name of the highlight part in results
49 highlightTag = "em"
50 # whether to use the absolute URL based on the baseURL in search index
51 absoluteURL = false
52 [params.search.algolia]
53 index = ""
54 appID = ""
55 searchKey = ""
56
57 # Header config
58 [params.header]
59 # desktop header mode ("fixed", "normal", "auto")
60 desktopMode = "fixed"
61 # mobile header mode ("fixed", "normal", "auto")
62 mobileMode = "auto"
63 # Header title config
64 [params.header.title]
65 # URL of the LOGO
66 logo = ""
67 # title name
68 name = ""
69 # you can add extra information before the name (HTML format is supported), such as icons
70 pre = ""
71 # you can add extra information after the name (HTML format is supported), such as icons
72 post = ""
73 # whether to use typeit animation for title name
74 typeit = false
75
76 # Footer config
77 [params.footer]
78 enable = true
79 # Custom content (HTML format is supported)
80 custom = ''
81 # whether to show Hugo and theme info
82 hugo = true
83 # whether to show copyright info
84 copyright = true
85 # whether to show the author
86 author = true
87 # Site creation time
88 since = 2019
89 # ICP info only in China (HTML format is supported)
90 icp = ""
91 # license info (HTML format is supported)
92 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>'
93
94 # Section (all posts) page config
95 [params.section]
96 # special amount of posts in each section page
97 paginate = 20
98 # date format (month and day)
99 dateFormat = "01-02"
100 # amount of RSS pages
101 rss = 10
102
103 # List (category or tag) page config
104 [params.list]
105 # special amount of posts in each list page
106 paginate = 20
107 # date format (month and day)
108 dateFormat = "01-02"
109 # amount of RSS pages
110 rss = 10
111
112 # Home page config
113 [params.home]
114 # amount of RSS pages
115 rss = 10
116 # Home page profile
117 [params.home.profile]
118 enable = true
119 # Gravatar Email for preferred avatar in home page
120 gravatarEmail = ""
121 # URL of avatar shown in home page
122 avatarURL = "/images/avatar.png"
123 # title shown in home page (HTML format is supported)
124 title = ""
125 # subtitle shown in home page
126 subtitle = "This is My New Hugo Site"
127 # whether to use typeit animation for subtitle
128 typeit = true
129 # whether to show social links
130 social = true
131 # disclaimer (HTML format is supported)
132 disclaimer = ""
133 # Home page posts
134 [params.home.posts]
135 enable = true
136 # special amount of posts in each home posts page
137 paginate = 6
138 # replaced with hiddenFromHomePage in params.page
139 # default behavior when you don't set "hiddenFromHomePage" in front matter
140 defaultHiddenFromHomePage = false
141
142 # Social config about the author
143 [params.social]
144 GitHub = "xxxx"
145 Linkedin = ""
146 Twitter = "xxxx"
147 Instagram = "xxxx"
148 Facebook = "xxxx"
149 Telegram = "xxxx"
150 Medium = ""
151 Gitlab = ""
152 Youtubelegacy = ""
153 Youtubecustom = ""
154 Youtubechannel = ""
155 Tumblr = ""
156 Quora = ""
157 Keybase = ""
158 Pinterest = ""
159 Reddit = ""
160 Codepen = ""
161 FreeCodeCamp = ""
162 Bitbucket = ""
163 Stackoverflow = ""
164 Weibo = ""
165 Odnoklassniki = ""
166 VK = ""
167 Flickr = ""
168 Xing = ""
169 Snapchat = ""
170 Soundcloud = ""
171 Spotify = ""
172 Bandcamp = ""
173 Paypal = ""
174 Fivehundredpx = ""
175 Mix = ""
176 Goodreads = ""
177 Lastfm = ""
178 Foursquare = ""
179 Hackernews = ""
180 Kickstarter = ""
181 Patreon = ""
182 Steam = ""
183 Twitch = ""
184 Strava = ""
185 Skype = ""
186 Whatsapp = ""
187 Zhihu = ""
188 Douban = ""
189 Angellist = ""
190 Slidershare = ""
191 Jsfiddle = ""
192 Deviantart = ""
193 Behance = ""
194 Dribbble = ""
195 Wordpress = ""
196 Vine = ""
197 Googlescholar = ""
198 Researchgate = ""
199 Mastodon = ""
200 Thingiverse = ""
201 Devto = ""
202 Gitea = ""
203 XMPP = ""
204 Matrix = ""
205 Bilibili = ""
206 Email = "xxxx@xxxx.com"
207 RSS = true #
208
209 # Page config
210 [params.page]
211 # whether to hide a page from home page
212 hiddenFromHomePage = false
213 # whether to hide a page from search results
214 hiddenFromSearch = false
215 # whether to enable twemoji
216 twemoji = false
217 # whether to enable lightgallery
218 lightgallery = false
219 # whether to enable the ruby extended syntax
220 ruby = true
221 # whether to enable the fraction extended syntax
222 fraction = true
223 # whether to enable the fontawesome extended syntax
224 fontawesome = true
225 # whether to show link to Raw Markdown content of the content
226 linkToMarkdown = true
227 # whether to show the full text content in RSS
228 rssFullText = false
229 # Table of the contents config
230 [params.page.toc]
231 # whether to enable the table of the contents
232 enable = true
233 # whether to keep the static table of the contents in front of the post
234 keepStatic = true
235 # whether to make the table of the contents in the sidebar automatically collapsed
236 auto = true
237 # KaTeX mathematical formulas
238 [params.page.math]
239 enable = true
240 # default block delimiter is $$ ... $$ and \\[ ... \\]
241 blockLeftDelimiter = ""
242 blockRightDelimiter = ""
243 # default inline delimiter is $ ... $ and \\( ... \\)
244 inlineLeftDelimiter = ""
245 inlineRightDelimiter = ""
246 # KaTeX extension copy_tex
247 copyTex = true
248 # KaTeX extension mhchem
249 mhchem = true
250 # Code config
251 [params.page.code]
252 # whether to show the copy button of the code block
253 copy = true
254 # the maximum number of lines of displayed code by default
255 maxShownLines = 10
256 # Mapbox GL JS config
257 [params.page.mapbox]
258 # access token of Mapbox GL JS
259 accessToken = ""
260 # style for the light theme
261 lightStyle = "mapbox://styles/mapbox/light-v9"
262 # style for the dark theme
263 darkStyle = "mapbox://styles/mapbox/dark-v9"
264 # whether to add NavigationControl
265 navigation = true
266 # whether to add GeolocateControl
267 geolocate = true
268 # whether to add ScaleControl
269 scale = true
270 # whether to add FullscreenControl
271 fullscreen = true
272 # social share links in post page
273 [params.page.share]
274 enable = true
275 Twitter = true
276 Facebook = true
277 Linkedin = false
278 Whatsapp = true
279 Pinterest = false
280 Tumblr = false
281 HackerNews = false
282 Reddit = false
283 VK = false
284 Buffer = false
285 Xing = false
286 Line = true
287 Instapaper = false
288 Pocket = false
289 Digg = false
290 Stumbleupon = false
291 Flipboard = false
292 Weibo = true
293 Renren = false
294 Myspace = true
295 Blogger = true
296 Baidu = false
297 Odnoklassniki = false
298 Evernote = true
299 Skype = false
300 Trello = false
301 Mix = false
302 # Comment config
303 [params.page.comment]
304 enable = true
305 # Disqus comment config
306 [params.page.comment.disqus]
307 #
308 enable = false
309 # Disqus shortname to use Disqus in posts
310 shortname = ""
311 # Gitalk comment config
312 [params.page.comment.gitalk]
313 #
314 enable = false
315 owner = ""
316 repo = ""
317 clientId = ""
318 clientSecret = ""
319 # Valine comment config
320 [params.page.comment.valine]
321 enable = false
322 appId = ""
323 appKey = ""
324 placeholder = ""
325 avatar = "mp"
326 meta= ""
327 pageSize = 10
328 lang = ""
329 visitor = true
330 recordIP = true
331 highlight = true
332 enableQQ = false
333 serverURLs = ""
334 # emoji data file name, default is "google.yml"
335 # ("apple.yml", "google.yml", "facebook.yml", "twitter.yml")
336 # located in "themes/LoveIt/assets/data/emoji/" directory
337 # you can store your own data files in the same path under your project:
338 # "assets/data/emoji/"
339 emoji = ""
340 # Facebook comment config
341 [params.page.comment.facebook]
342 enable = false
343 width = "100%"
344 numPosts = 10
345 appId = ""
346 languageCode = ""
347 # Telegram comments config
348 [params.page.comment.telegram]
349 enable = false
350 siteID = ""
351 limit = 5
352 height = ""
353 color = ""
354 colorful = true
355 dislikes = false
356 outlined = false
357 # Commento comment config
358 [params.page.comment.commento]
359 enable = false
360 # Utterances comment config
361 [params.page.comment.utterances]
362 enable = false
363 # owner/repo
364 repo = ""
365 issueTerm = "pathname"
366 label = ""
367 lightTheme = "github-light"
368 darkTheme = "github-dark"
369 # Third-party library config
370 [params.page.library]
371 [params.page.library.css]
372 # someCSS = "some.css"
373 # located in "assets/"
374 # Or
375 # someCSS = "https://cdn.example.com/some.css"
376 [params.page.library.js]
377 # someJavascript = "some.js"
378 # located in "assets/"
379 # Or
380 # someJavascript = "https://cdn.example.com/some.js"
381 # Page SEO config
382 [params.page.seo]
383 # image URL
384 images = []
385 # Publisher info
386 [params.page.seo.publisher]
387 name = ""
388 logoUrl = ""
389
390 # TypeIt config
391 [params.typeit]
392 # typing speed between each step (measured in milliseconds)
393 speed = 100
394 # blinking speed of the cursor (measured in milliseconds)
395 cursorSpeed = 1000
396 # character used for the cursor (HTML format is supported)
397 cursorChar = "|"
398 # cursor duration after typing finishing (measured in milliseconds, "-1" means unlimited)
399 duration = -1
400
401 # Site verification code config for Google/Bing/Yandex/Pinterest/Baidu
402 [params.verification]
403 google = ""
404 bing = ""
405 yandex = ""
406 pinterest = ""
407 baidu = ""
408
409 # Site SEO config
410 [params.seo]
411 # image URL
412 image = ""
413 # thumbnail URL
414 thumbnailUrl = ""
415
416 # Analytics config
417 [params.analytics]
418 enable = false
419 # Google Analytics
420 [params.analytics.google]
421 id = ""
422 # whether to anonymize IP
423 anonymizeIP = true
424 # Fathom Analytics
425 [params.analytics.fathom]
426 id = ""
427 # server url for your tracker if you're self hosting
428 server = ""
429
430 # Cookie consent config
431 [params.cookieconsent]
432 enable = true
433 # text strings used for Cookie consent banner
434 [params.cookieconsent.content]
435 message = ""
436 dismiss = ""
437 link = ""
438
439 # CDN config for third-party library files
440 [params.cdn]
441 # CDN data file name, disabled by default
442 # ("jsdelivr.yml")
443 # located in "themes/LoveIt/assets/data/cdn/" directory
444 # you can store your own data files in the same path under your project:
445 # "assets/data/cdn/"
446 data = ""
447
448 # Compatibility config
449 [params.compatibility]
450 # whether to use Polyfill.io to be compatible with older browsers
451 polyfill = false
452 # whether to use object-fit-images to be compatible with older browsers
453 objectFit = false
454
455# Markup related config in Hugo
456[markup]
457 # Syntax Highlighting
458 [markup.highlight]
459 codeFences = true
460 guessSyntax = true
461 lineNos = true
462 lineNumbersInTable = true
463 # false is a necessary configuration
464 # (https://github.com/dillonzq/LoveIt/issues/158)
465 noClasses = false
466 # Goldmark is from Hugo 0.60 the default library used for Markdown
467 [markup.goldmark]
468 [markup.goldmark.extensions]
469 definitionList = true
470 footnote = true
471 linkify = true
472 strikethrough = true
473 table = true
474 taskList = true
475 typographer = true
476 [markup.goldmark.renderer]
477 # whether to use HTML tags directly in the document
478 unsafe = true
479 # Table Of Contents settings
480 [markup.tableOfContents]
481 startLevel = 2
482 endLevel = 6
483
484# Author config
485[author]
486 name = "xxxx"
487 email = ""
488 link = ""
489
490# Sitemap config
491[sitemap]
492 changefreq = "weekly"
493 filename = "sitemap.xml"
494 priority = 0.5
495
496# Permalinks config
497[Permalinks]
498 # posts = ":year/:month/:filename"
499 posts = ":filename"
500
501# Privacy config
502[privacy]
503 # privacy of the Google Analytics (replaced by params.analytics.google)
504 [privacy.googleAnalytics]
505 # ...
506 [privacy.twitter]
507 enableDNT = true
508 [privacy.youtube]
509 privacyEnhanced = true
510
511# Options to make output .md files
512[mediaTypes]
513 [mediaTypes."text/plain"]
514 suffixes = ["md"]
515
516# Options to make output .md files
517[outputFormats.MarkDown]
518 mediaType = "text/plain"
519 isPlainText = true
520 isHTML = false
521
522# Options to make hugo output files
523[outputs]
524 #
525 home = ["HTML", "RSS", "JSON"]
526 page = ["HTML", "MarkDown"]
527 section = ["HTML", "RSS"]
528 taxonomy = ["HTML", "RSS"]
529 taxonomyTerm = ["HTML"]
Note
Note that some of these parameters are explained in details in other sections of this documentation.
Hugo environments
Default environments are development with hugo serve and production with hugo.
Due to limitations in the local development environment,
the comment system, CDN and fingerprint will not be enabled in the development environment.
You could enable these features with hugo serve -e production.
Tips about CDN Configuration
1[params.cdn]
2 # CDN data file name, disabled by default
3 # ("jsdelivr.yml")
4 data = ""
The default CDN data file is located in themes/LoveIt/assets/data/cdn/ directory.
You can store your own data file in the same path under your project: assets/data/cdn/.
Tips about social Configuration
You can directly set your ID to get a default social link and its icon:
1[params.social]
2 Mastodon = "@xxxx"
The social link generated is https://mastodon.technology/@xxxx.
Or You can set more options through a dict:
1[params.social]
2 [params.social.Mastodon]
3 # weight when arranging icons (the greater the weight, the later the icon is positioned)
4 weight = 0
5 # your social ID
6 id = "@xxxx"
7 # prefix of your social link
8 prefix = "https://mastodon.social/"
9 # content hovering on the icon
10 title = "Mastodon"
The default data of all supported social links is located in themes/LoveIt/assets/data/social.yaml,
which is you can refer to.
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/.
Customize browserconfig.xml and site.webmanifest to set theme-color and background-color.
3.3 Style Customization
Note
Hugo extended version is necessary for the 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 assets/css relative to your project root directory.
In assets/css/_override.scss, you can override the variables in themes/LoveIt/assets/css/_variables.scss to customize the style.
Here is a example:
1@import url('https://fonts.googleapis.com/css?family=Fira+Mono:400,700&display=swap&subset=latin-ext');
2$code-font-family: Fira Mono, Source Code Pro, Menlo, Consolas, Monaco, monospace;
In assets/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 | Hugo Code | HTML lang Attribute |
Theme Docs | Lunr.js Support |
|---|---|---|---|---|
| English | en |
en |
||
| Simplified Chinese | zh-cn |
zh-CN |
||
| French | fr |
fr |
||
| Polish | pl |
pl |
||
| Brazilian Portuguese | pt-br |
pt-BR |
||
| Italian | it |
it |
||
| Spanish | es |
es |
||
| German | de |
de |
||
| German | de |
de |
||
| Serbian | sr |
sr |
||
| Russian | ru |
ru |
||
| Romanian | ro |
ro |
||
| Vietnamese | vi |
vi |
4.2 Basic Configuration
After learning how Hugo handle multilingual websites, define your languages in your site configuration.
For example with English, Chinese and French website:
1# [en, zh-cn, fr, pl, ...] determines default content language
2defaultContentLanguage = "en"
3
4[languages]
5 [languages.en]
6 weight = 1
7 title = "My New Hugo Site"
8 languageCode = "en"
9 languageName = "English"
10 [[languages.en.menu.main]]
11 identifier = "posts"
12 pre = ""
13 post = ""
14 name = "Posts"
15 url = "/posts/"
16 title = ""
17 weight = 1
18 [[languages.en.menu.main]]
19 identifier = "tags"
20 pre = ""
21 post = ""
22 name = "Tags"
23 url = "/tags/"
24 title = ""
25 weight = 2
26 [[languages.en.menu.main]]
27 identifier = "categories"
28 pre = ""
29 post = ""
30 name = "Categories"
31 url = "/categories/"
32 title = ""
33 weight = 3
34
35 [languages.zh-cn]
36 weight = 2
37 title = "我的全新 Hugo 网站"
38 # language code, CN only here
39 languageCode = "zh-CN"
40 languageName = "简体中文"
41 # whether to include Chinese/Japanese/Korean
42 hasCJKLanguage = true
43 [[languages.zh-cn.menu.main]]
44 identifier = "posts"
45 pre = ""
46 post = ""
47 name = "文章"
48 url = "/posts/"
49 title = ""
50 weight = 1
51 [[languages.zh-cn.menu.main]]
52 identifier = "tags"
53 pre = ""
54 post = ""
55 name = "标签"
56 url = "/tags/"
57 title = ""
58 weight = 2
59 [[languages.zh-cn.menu.main]]
60 identifier = "categories"
61 pre = ""
62 post = ""
63 name = "分类"
64 url = "/categories/"
65 title = ""
66 weight = 3
67
68 [languages.fr]
69 weight = 3
70 title = "Mon nouveau site Hugo"
71 languageCode = "fr"
72 languageName = "Français"
73 [[languages.fr.menu.main]]
74 identifier = "posts"
75 pre = ""
76 post = ""
77 name = "Postes"
78 url = "/posts/"
79 title = ""
80 weight = 1
81 [[languages.fr.menu.main]]
82 identifier = "tags"
83 pre = ""
84 post = ""
85 name = "Balises"
86 url = "/tags/"
87 title = ""
88 weight = 2
89 [[languages.fr.menu.main]]
90 identifier = "categories"
91 name = "Catégories"
92 pre = ""
93 post = ""
94 url = "/categories/"
95 title = ""
96 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
Note
Be aware that only translated pages are displayed in menu. It’s not replaced with default language content.
Tip
Use Front Matter parameter to translate urls too.
4.3 Overwrite Translation Strings
Translations strings are used for common default values used in the theme. Translations are available in some languages, 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 to the theme!
5 Search
Based on Lunr.js or algolia, 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.
1[outputs]
2 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:
1[params.search]
2 enable = true
3 # type of search engine ("lunr", "algolia")
4 type = "lunr"
5 # max index length of the chunked content
6 contentLength = 4000
7 # placeholder of the search bar
8 placeholder = ""
9 # max number of results length
10 maxResultLength = 10
11 # snippet length of the result
12 snippetLength = 30
13 # HTML tag name of the highlight part in results
14 highlightTag = "em"
15 # whether to use the absolute URL based on the baseURL in search index
16 absoluteURL = false
17 [params.search.algolia]
18 index = ""
19 appID = ""
20 searchKey = ""
How to choose search engine?
The following is a comparison of two search engines:
lunr: simple, no need to synchronizeindex.json, no limit forcontentLength, but high bandwidth and low performance (Especially for Chinese which needs a large segmentit library)algolia: high performance and low bandwidth, but need to synchronizeindex.jsonand limit forcontentLength
The content of the post is separated by h2 and h3 HTML tag to improve query performance and basically implement full-text search.
contentLength is used to limit the max index length of the part starting with h2 and h3 HTML tag.
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 CLI tool may be better.
Algolia Atomic is a good 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…