dillonzq / loveit

❤️A clean, elegant but advanced blog theme for Hugo 一个简洁、优雅且高效的 Hugo 主题

LoveIt Theme | Hugo

English README | 简体中文说明

LoveIt is a clean, elegant but advanced blog theme for Hugo.

It is based on the original LeaveIt Theme and KeepIt Theme.

Since the three themes have a similar look, if you have questions about their differences, read Why choose LoveIt so that you can choose the one that works best for you.

Demo Site

To see this theme in action, here is a live demo site which is rendered with LoveIt theme.

Why choose LoveIt

Compared to the original LeaveIt theme and the KeepIt theme, the LoveIt theme has the following modifications.

• Custom Header
• Custom CSS Style
• A new home page, compatible with the latest version of Hugo
• A lot of style detail adjustments, including color, font size, margins, code preview style
• More readable dark mode
• Some beautiful CSS animations
• Easy-to-use and self-expanding table of contents
• More social links, share sites and comment system
• Search supported by Lunr.js or algolia
• Copy code to clipboard with one click
• Extended Markdown syntax for Font Awesome icons
• Extended Markdown syntax for ruby annotation
• Extended Markdown syntax for fraction
• Mathematical formula supported by KaTeX
• Diagram syntax shortcode supported by mermaid
• Interactive data visualization shortcode supported by ECharts
• Mapbox shortcode supported by Mapbox GL JS
• Embedded music player supported by APlayer and MetingJS
• Bilibili player supported
• Kinds of admonitions shortcode supported
• Custom style shortcodes supported
• CDN for all third-party libraries supported
• ...

In short, if you prefer the design language and freedom of the LoveIt theme, if you want to use the extended Font Awesome icons conveniently, if you want to embed mathematical formulas, flowcharts, music or Bilibili videos in your posts, the LoveIt theme may be more suitable for you.

I hope you will LoveIt ❤️!

Features

Performance and SEO

• Optimized for performance: 99/100 on mobile and 100/100 on desktop in Google PageSpeed Insights
• Optimized SEO performance with a correct SEO SCHEMA based on JSON-LD
• Google Analytics supported
• Fathom Analytics supported
• Plausible Analytics supported
• Yandex Metrica supported
• Search engine verification supported (Google, Bind, Yandex and Baidu)
• CDN for third-party libraries supported
• Automatically converted images with Lazy Load by lazysizes

Appearance and Layout

• Desktop/Mobile Responsive layout
• Light/Dark mode
• Globally consistent design language
• Pagination supported
• Easy-to-use and self-expanding table of contents
• Multilanguage supported and i18n ready
• Beautiful CSS animation

Social and Comment Systems

• Gravatar supported by Gravatar
• Local Avatar supported
• Up to 73 social links supported
• Up to 24 share sites supported
• Disqus comment system supported by Disqus
• Gitalk comment system supported by Gitalk
• Valine comment system supported by Valine
• Facebook comments system supported by Facebook
• Telegram comments system supported by Telegram Comments
• Commento comment system supported by Commento
• utterances comment system supported by utterances
• giscus comment system supported by giscus

Extended Features

• Search supported by Lunr.js or algolia
• Twemoji supported
• Automatically highlighting code
• Copy code to clipboard with one click
• Images gallery supported by lightGallery
• Extended Markdown syntax for Font Awesome icons
• Extended Markdown syntax for ruby annotation
• Extended Markdown syntax for fraction
• Mathematical formula supported by KaTeX
• Diagrams shortcode supported by mermaid
• Interactive data visualization shortcode supported by ECharts
• Mapbox shortcode supported by Mapbox GL JS
• Music player shortcode supported by APlayer and MetingJS
• Bilibili player shortcode
• Kinds of admonitions shortcode
• Custom style shortcode
• Custom script shortcode
• Animated typing supported by TypeIt
• Cookie consent banner supported by cookieconsent
• Person shortcode
• ...

Documentation

Build Documentation Locally:

hugo server --source=exampleSite

Multilingual and i18n

LoveIt supports the following languages:

• English
• Simplified Chinese
• Traditional Chinese
• French
• Polish
• Brazilian Portuguese
• Italian
• Spanish
• German
• Serbian
• Russian
• Romanian
• Vietnamese
• Arabic
• Catalan
• Thai
• Telugu
• Indonesian
• Turkish
• Korean
• Hindi
• Contribute with a new language

Languages Compatibility

Roadmap

Questions, ideas, bugs, pull requests

All feedback is welcome! Head over to the issue tracker.

License

LoveIt is licensed under the MIT license. Check the LICENSE file for details.

Special Thanks

Thanks to the authors of following resources included in the theme:

• normalize.css
• Font Awesome
• Simple Icons
• Animate.css
• autocomplete
• Lunr.js
• algoliasearch
• lazysizes
• object-fit-images
• Twemoji
• emoji-data
• lightGallery
• clipboard.js
• Sharer.js
• TypeIt
• KaTeX
• mermaid
• ECharts
• Mapbox GL JS
• APlayer
• MetingJS
• Gitalk
• Valine
• cookieconsent

Author

Dillon

Sponsor

If you enjoy the theme, please consider buying me a coffee ☕️.

• PayPal
• Alipay
• Wechat

Thanks! ❤️

Stargazers over time

loveit's Issues

gitRepo

gitRepo参数填写无效

Building sites … ERROR 2020/02/20 16:44:37 Failed to read Git log: fatal: Not a git repository (or any of the parent directories): .git
Total in 450 ms
Error: Error building site: logged 1 error(s)

尝试填写服务器.git目录绝对路径相对路径 github的repo路径 皆报错无详细提示

Using mermaid on markdown

Hi!
First of all, thank you everything on this theme.

I found that drawing diagram by mermaid is not working. I checked mermaid syntax on other markdown editor but it works. It seems like that I missed something like configuration on config.toml or other configurations but couldn't find any options.

For double check, I show the script below:

```mermaid
graph LR;
A[Hard edge] -->|Link text| B(Round edge)
B --> C{Decision}
C -->|One| D[Result one]
C -->|Two| E[Result two]
```

Is there any option to enable mermaid plugin? or am I using it wrong?

Hinding avatar?

many thanks for this beautiful theme. One question - is there any option to hide the avatar (other than displaying a white picture). Leaving the file location empty produces an error.

Illegible gist in dark mode

gist shortcodes become illegible in darck mode

关于多语言支持的问题

看到作者将原先英语和中文的配置合并到一处了，但是不知道什么原因如果默认语言改成 zh-CN会出错，然后我把config.toml内所有的CN改为小写cn就正常了。
另外想请问下，如果仅仅想生成仅中文网站，之前的版本我是直接注释掉config.toml中切换语言的选项的，另外注释掉后相关的切换按钮也一起消失了，现在的版本想实现这个效果的话应该如何做？

#  [[menu.main]]
#    identifier = "en"
#    pre = '<i class="fas fa-language fa-fw"></i>'
#    name = ""
#    title = "English"
#    url = ""
#    weight = 5

怎么才能将字数统计改成统计中文呢？

Custom CSS doesn't seem to be applied

Giving this theme another go, stuck with custom CSS.

╭─jbfreels@kira ~/src/jbfreels.com ‹master*›
╰─$ hugo env
Hugo Static Site Generator v0.62.2/extended darwin/amd64 BuildDate: unknown
GOOS="darwin"
GOARCH="amd64"
GOVERSION="go1.13.5"

I've created assets/css/_custom.scss with the following in it...

.home-intro .home-social-links i {
  font-size: 2.0rem;
}

I'm probably missing something simple. I run HUGO_ENV=production hugo --gc --minify to generate the site. Searching the public folder I don't see my change to style.min.css or any other file in public.

Set dark-theme as default theme for new users

Hello,

I want to know if it possible to set dark-theme as default theme for new users ? If yes, could please explain me how to do that.

Thanks

配置文件内设置了valine，但没有生效

[params.valine] # Valine Comment Config (https://github.com/xCss/Valine)
enable = true

valine无法关闭验证？

config里verify = false后依然有数字验证

<.scratch.Set>: nil pointer evaluating interface {}.Set

你好，发现一个问题：

具体代码如下：

Failed to render pages: render of "home" failed: execute of template failed: template: index.html:23:20: executing "content" at <.Render>: error calling Render: failed to execute template ["summary"] v: execute of template failed: template: _default/summary.html:8:16: executing "_default/summary.html" at <partial "plugin/image.html" (dict "src" $image "description" $.Description "scratch" $scratch)>: error calling partial: "/home/chishui/Websites/u1s3/themes/LoveIt/layouts/partials/plugin/image.html:29:12": execute of template failed: template: partials/plugin/image.html:29:12: executing "partials/plugin/image.html" at <.scratch.Set>: nil pointer evaluating interface {}.Set

环境：新创建的 Hugo 站点

复现：在有多个 Markdown 文档使用了 featuredImage 属性的时候，使用 hugo server -D 开启服务，修改任一文档时会出现这个错误。但是把所有文档重新保存一边后就正常了。此时如果重新开启服务的话就又会出现。

但是在使用 hugo server -D --disableFastRender 开启服务就不会出现上面的错误，所以上面可能是缓存方面的问题。

---

另外经过尝试，把 summary.html 文件里的

{{- partial "plugin/image.html" (dict "src" $image "description" $.Description "scratch" $scratch) -}}

中的 "scratch" $scratch 删掉后使用 hugo server -D 又不会报错了。

Add syntax highlighter for R

Hi,
Thank you for your great work! Just wonder of how to add syntax highlighter for R programming? Is there already available and we just need to set params on config file or it needs further development?

Thank you in advance.

Apostrophe showing weird formatting

Hello Everyone,

Love the theme, thanks for sharing it with the community. However, I'm getting a small issue that's bugging me. When I use the Apostrophe character in a word composition like wasn't I'm expecting it to stay together. However, for some reason the character following the apostrophe is somehow tabbed in its formatting, if I look into the underlying HTML it's correct, but something in the CSS seems to be doing this.

Example/test page: https://www.cmpsoares.com/2020/02/something-comes-soon/

Does anyone know how I can fix this?
Many thanks.

Tag goes to wrong position.

hugo version
v0.65.3

environment
macOS Catalina 10.15.1

Hi,
Thanks for the lovely theme. I really like it.
I have an issue when I run hugo server with command hugo server -D and check the page, I see the tag goes to wrong position as you can see the image below.

添加不了Valine评论系统

您好！十分感谢您的hugo主题。有一个问题就是我在config.toml中已经将params.comment的enable和params.comment.valine的enable都设置为true了，valine的appID和appKey都配置好了，还是没有评论系统。望能解答！

Change show_in_homepage to exclude_from_homepage

When I list posts on my home page, I would expect them to be a list of all of my posts with the most recent being first. I think most people would expect this behavior.

With the current behavior, only posts with show_in_homepage are shown. I will have to go through all of my posts and add the show_in_homepage option and remember to add this to future posts. I think it would make more sense to reverse this logic and add all posts but exclude those with a specific option.

If there is concern about changing the behavior for people currently using the them, a new home_mode value could be created to allow for both behaviors.

文章预览显示行号的问题

当文章的内容开头为pre格式的代码时，文章预览就先会显示行号，如图

文章预览

文章内容

parse failed: template: shortcodes/admonition.html:3: function "merge" not defined

Trying to use LoveIt and getting the below error when running hugo either locally or via netlify:

Error: "/home/[...]/themes/LoveIt/layouts/shortcodes/admonition.html:3:1": parse failed: template: shortcodes/admonition.html:3: function "merge" not defined

Haven't been able to find any pointers so far so raising an issue, thanks for your help.

Custom CSS changes not being picked up

I added assets/css/_custom.scss to my website's directory and the theme doesn't seem to pick up on the contents of _custom.scss.

添加脚注后推送内容和目录出现重叠

如图。不知道是不是我哪里设置的问题，推送中添加脚注后，出现了上面的现象。此推送链接：http://www.i-lightning.cn/2020/02/wrf%E6%A8%A1%E5%BC%8F%E5%89%8D%E5%A4%84%E7%90%86wps/#%E5%8F%82%E8%80%83%E9%93%BE%E6%8E%A5

每隔一段时间后，打开博客主页，加载就会很慢，如图（iconfont.min.css）。

具体表现 ：应该是在加载头像下方动态划出的字幕和bilibili的小图标。
其中 iconfont.min.css 加载了十几秒。

Modify title text presentation

Hello,

By default, the title texts are written from right to left. Is it possible to modify the theme so that the title texts are written from left to right?

Thanks,

Adding Free Code Camp to social on home screen

Adding Free Code Camp to social list.

How can I use the valine comment system?

After I filled the config.toml including the 'valine_js' in [params.cdn] and the [params.valine], however, it didn't work.

the command I used was hugo server -D and I tried push the /public dir to my github page, it didn't work either

配置了gitalk不生效

comments.html复制的没有更改，config里面js和css的cdn也配置了，params.gitalk相关也配置了。

toc color

Hi, its a good theme!
I found that the activate color of toc has changed form blue (#2d96bd) to pink (#ef3982), but i prefer the former one.
So I tried to edit the $post-link-hover-color in _variables.scss but nothing happened.

todo list 的勾选状态与常规使用的相反

todo list ：

一般样式：

未完成- [ ]，不勾选
已完成- [x]，勾选

LoveIt 渲染样式：

- [ ] 勾选
- [x] 不勾选

如何给文章添加标签和分类

Hacker News logo is missing

When I set a Hacker News profile in the config.toml file I get an invisible icon. The link actually works to my Hacker News profile, but the icon is missing. See http://joehainline.com for an example

Overwrite description of posts d'ont appear in home

I've put a description in my post (description: "My description"), but it's not modifying the description of the post when listed in the home page.
Is it a bug or an error of my understanding of the purpose of "description" parameter of a post ?

资源加载不太对劲.

https://yangzhaoyunfei.github.io/
最新版, 前端也看不太懂, 求问大佬, 咋回事啊.

static目录应该放在哪里呢？网站不显示图片图标

我在本地调试正常后，push到github上发现网站的图标和图片都不显示！static目录应该放在哪里呢？请指教一下！在网上搜索很多都没解决方法

config.toml update to include new Goldmark default

Please include the following to config.toml under the Example Site.

[markup]
[markup.goldmark]
[markup.goldmark.renderer]
unsafe = true

Since Hugo 0.6.0 the default markdown now requires this to render HTML tags.

As an example, look at the current Markdown syntax guide for LoveIt:
https://themes.gohugo.io//theme/LoveIt/post/markdown-syntax/

At present HTML is rendered with <!-- raw HTML omitted --> The above setting will rectify it, but ultimately it's your decision to include it or not.

Code is not displayed correctly in home preview

Hi,
seems that posts containing code in the home preview are displayed incorrectly:

Home:

Post:

Subtitle for posts

Hi,
first of all thanks for your work, I really appreciate this theme, I was wondering if would be ok to add subtitle to posts

报告一个现象，请大佬看下。

首页头像下方那一串打字效果的文字（举例：hello world），在第一页显示正常，切换到博客第二页是显示（hheelloo wwoorrlldd），第三页以此类推。。
不知道是我的设置有问题还是什么问题？

建议 comments.html 中 Valine 配置项 meta 默认值改为与官方默认值一致

rt 在查看Valine 有关设置时，看到模板中 meta 值固定为 ["nick", "mail"], 建议在 config 中增加个配置项吧，meta = ['nick','mail','link'] ，网站地址的输入有时候还有有些作用的

可以添加Bilibili的Social 链接吗?

BlackFriday doesn't seem to work

I wanted to have external links open in a new tab so I followed the standard Hugo way of using BlackFriday but it doesn't seem to be working. I'm not sure if it has something to do with the theme or not but I couldn't get it to work on a new CLI generated site either.

[blackfriday]
  hrefTargetBlank = true

主题 helloworld 入门失败，求帮助

很喜欢这个主题，但是在使用上遇到不少困难。

➜ 001Blog hugo new site testblog
➜ 001Blog cd testblog
➜ testblog git init
➜ testblog git:(master) ✗ git submodule add https://github.com/dillonzq/LoveIt.git themes/LoveIt
➜ testblog git:(master) ✗ cp -R themes/LoveIt/exampleSite/ .
按照上面步骤，config.toml已经配置成LoveIt主题，并准备好样例站点内容。

启动报错：
➜ testblog git:(master) ✗ hugo server Error: module "LoveIt" not found; either add it as a Hugo Module or store it in "/Users/louis/CloudStation/001Blog".: module does not exist

将文件夹重命名成LoveIt，并改动主题目录的配置为：
# 主题目录 themesDir = ".."

启动后报错：
➜ LoveIt git:(master) ✗ hugo server Building sites … ERROR 2020/03/04 11:15:29 Failed to read Git log: fatal: your current branch 'master' does not have any commits yet Built in 26 ms Error: Error building site: "/Users/louis/001Blog/LoveIt/content/posts/Basic-Markdown-Preview.zh.md:77:1": failed to extract shortcode: template for shortcode "admonition" not found

代码我不会改，就把报错的文件删掉”content/posts/Basic-Markdown-Preview.zh.md“后再启动，报另外错误：

至此卡主，以上折腾了好几个小时，挺打击使用的，请楼主一定帮忙我们小散哈

➜ testblog git:(master) ✗ tree .
.
├── archetypes
│   └── default.md
├── config
│   └── css
│   ├── _custom.scss
│   └── _override.scss
├── config.toml
├── content
│   ├── about.en.md
│   ├── about.zh.md
│   └── posts
│   ├── Basic-Markdown-Preview.zh.md
│   ├── documentation.en.md
│   ├── documentation.zh.md
│   ├── emoji-support.en.md
│   ├── markdown-syntax.en.md
│   ├── placeholder-text.en.md
│   ├── rich-content.en.md
│   ├── test-mermaid.zh.md
│   └── test.zh.md
├── data
├── layouts
├── static
│   ├── android-chrome-192x192.png
│   ├── android-chrome-512x512.png
│   ├── apple-touch-icon.png
│   ├── browserconfig.xml
│   ├── favicon-16x16.png
│   ├── favicon-32x32.png
│   ├── favicon.ico
│   ├── images
│   │   ├── Apple-Devices-Preview.png
│   │   ├── avatar.png
│   │   ├── emoji.jpg
│   │   ├── hugo.png
│   │   └── markdown.png
│   ├── logo.png
│   ├── mstile-150x150.png
│   ├── safari-pinned-tab.svg
│   └── site.webmanifest
└── themes
└── LoveIt
├── LICENSE
├── README.md
├── README.zh.md
├── archetypes
│   └── default.md
├── assets
│   ├── css
│   │   ├── _core
│   │   │   ├── _base.scss
│   │   │   ├── _layout.scss
│   │   │   ├── _media.scss
│   │   │   └── _normalize.scss
│   │   ├── _page
│   │   │   ├── _404.scss
│   │   │   ├── _archive.scss
│   │   │   ├── _home.scss
│   │   │   ├── _index.scss
│   │   │   ├── _single.scss
│   │   │   └── _special.scss
...

提供几个环境信息：
➜ ~ hugo version Hugo Static Site Generator v0.60.1/extended darwin/amd64 BuildDate: unknown ➜ ~ go version go version go1.13.4 darwin/amd64

如何启用侧边栏目录

如图

怎么嵌入流程图呢

有没有一个比较详细的嵌入流程图的文档呢

关于渲染页面时生产环境命令的建议

最近看了下Hugo的命令文档以及其他人制作的一些主题模板，Hugo 本身有生产环境方面的参数；而作者建议使用的命令是 HUGO_ENV=production hugo --gc --minify 。

建议作者考虑将模板内layouts文件夹下面的几个 html 页面内的 (getenv "HUGO_ENV") "production" 替换为 hugo.Environment "production"

这样子有几个好处：生成 public 文件夹时的 hugo 命令只需要输入 hugo --gc --minify即可，因为默认就是生产环境；而本地预览的时候需要输入 hugo server -D --environment production；另外就是
HUGO_ENV=production hugo --gc --minify 这个在bash下可以执行，但是像 powershell 就不能识别了。

Add site search function

Changing fonts directory (assets/others/css/lib → static/css/lib)?

Hi @dillonzq, thank you for creating such a nice theme!

I found that font files are not included in a generated site if I simply followed the instruction to copy config.toml in exampleSite to my site's root directory. This is because font files are in assets/others/css/lib and staticDir written in config.toml relatively points it. The following modification worked for me.

# config.toml at my site's root directory
- staticDir = ["static", "../assets/others"]
+ staticDir = ["static", "themes/LoveIt/assets/others"]

But if I understand correctly, font files should be placed in static directory because they are static and no asset processing is necessary. Moreover, it might be more simple and less confusing because files in static are automatically included in a generated site.

Thank you!

可否定期发布一个功能相对稳定的release

我看master分支已经停留了很久了，是否可以定期发布一个功能相对稳定的release，毕竟每次升级都可能需要修改配置文件，造成配置文件不兼容

ui错误, 固定高度导致显示不全.

图片宽度超过博客的宽度会溢出

感谢作者开源这个主题！

如我这篇文章
https://blog.golang.im/how-to-release-go-module/
当图片宽度过大的时候，就会比文章的宽度还大，变得很奇怪。似乎是第一次加载会这样，第二次就不会了。

Bad escape sequence in string

Hello,

I'm using this theme recently for my Hugo blog but in the home page ( https://www.cmpsoares.com ) I keep getting the following error from the google search console: Bad escape sequence in string

I'm quite new to all this scheme.org stuff so could someone enlighten and help me, please?

Kind regards,
Carlos Soares.

部分数学表达式无法正常显示

实际使用过程中，发现有的表达式无法显示,比如\dfrac{A_{ij}}{x},然而\dfrac{A_i}{x}显示正常。