feat: add en/zh README and exampleSite files

.gitignore

@@ -1,5 +1,6 @@
 # Hugo default output directory
-/public
+public
+resources
 
 ## OS Files
 # Windows

README.md

@@ -1,40 +1,53 @@
-# LoveIt Hugo Theme
+# LoveIt Theme | Hugo
 
-LoveIt is a clean, elegant, simple but not simpler blog theme for Hugo based on the original [LeaveIt Theme](https://github.com/liuzc/LeaveIt/) and [KeepIt Theme](https://github.com/liuzc/LeaveIt/) developed by [Dillon](https://dillonzq.com).
+[中文 README](README.zh.md)
 
-![hugo-theme-LoveIt](https://github.com/dillonzq/LoveIt/blob/master/images/screenshot.png)
+**LoveIt** is a **clean**, **elegant** but **advanced** blog theme for [Hugo](https://gohugo.io/).
+
+It is based on the original [LeaveIt Theme](https://github.com/liuzc/LeaveIt/) and [KeepIt Theme](https://github.com/liuzc/LeaveIt/).
+
+![Hugo Theme LoveIt](exampleSite/static/images/Apple-Devices-Preview.png)
 
 ## Demo
 
-To see this theme in action,  Here is a live [demo site](https://suspicious-archimedes-ab369d.netlify.com) which is rendered with this theme.
+To see this theme in action, here is a live [demo site](https://hugo-loveit-en.netlify.com) which is rendered with **LoveIt** theme.
 
-People that are using **LoveIt**:
+Websites using **LoveIt** theme:
 
 * [Dillon](https://dillonzq.com)
+* Yours
 
 ## Features
 
-* Optimized for performance: 99/100 on mobile and 100/100 on desktop in Google PageSpeed Insights
+* Optimized for performance: 99/100 on mobile and 100/100 on desktop in [Google PageSpeed Insights](https://developers.google.com/speed/pagespeed/insights)
+* Desktop / Mobile layouts support
+* Dark / Light mode
 * Optimized SEO performance with a correct SEO SCHEMA based on JSON-LD
 * A More coerent style beetwen page and sections
-* Multilanguage support
+* Multilanguage support and I18N ready
 * Pagination support
-* Google Analytics support
-* Disqus Comment System
-* Gitalk Comment System
-* Valine Comment System
-* Gravatar Support
-* Local Avatar Support
+* [Google Analytics](https://analytics.google.com/analytics) support
+* Disqus comment system support by [Disqus](https://disqus.com)
+* Gitalk comment system support by [Gitalk](https://github.com/gitalk/gitalk)
+* Valine comment system support by [Valine](https://valine.js.org/)
+* Gravatar support by [Gravatar](https://gravatar.com)
+* Local Avatar support
+* Up to 54 social sites supported
 * Share post support
 * Search engine verification support (Google, Bind, Yandex and Baidu)
-* Added configuration file for use on [Netlify](https://www.netlify.com)
-* Dark/Light mode
-* Up to 54 social sites supported out-of-the-box [see the list here](https://github.com/Fastbyte01/KeepIt/wiki/List-of-social-platforms-supported-out-of-box)
-* Translation ready
-* Wrap Image with Figure Tag without Shortcode. Thanks [Junian.Net](https://www.junian.net/hugo-image-figure-wrap/)
-* Load images with Lazy Load By [lazysizes](https://github.com/aFarkas/lazysizes)
-* Automatically highlighting code By [Google code-prettify](https://github.com/google/code-prettify), Customizable styles via CSS. See the [themes gallery](https://rawgit.com/google/code-prettify/master/styles/index.html).
-* Automagical image gallery with [lightGallery](https://github.com/sachinchoolur/lightGallery)
+* Automatically converted images with Lazy Load by [lazysizes](https://github.com/aFarkas/lazysizes)
+* Automatically highlighting code by chroma in Hugo
+* Extended markdown syntax for [Font Awesome](https://fontawesome.com/) icons
+* Math formula support by [Katex](https://katex.org/)
+* Diagram syntax shortcode support by [mermaid](https://github.com/knsv/mermaid)
+* Embedded music player support by [APlayer](https://github.com/MoePlayer/APlayer) and [MetingJS](https://github.com/metowolf/MetingJS)
+* Bilibili player support
+* Kinds of admonitions shortcode support
+* Custom align and float style shortcodes support
+* Animated typing support by [TypeIt](https://typeitjs.com/)
+* Animated coutdown support by [jQuery.countdown](https://github.com/hilios/jQuery.countdown)
+* Dynamic to top support by [Smooth Scroll](https://github.com/cferdinandi/smooth-scroll)
+* CDN support
 * ...
 
 ## Getting Started
@@ -46,7 +59,13 @@ Clone this repository to your hugo theme directory.
   git clone https://github.com/dillonzq/LoveIt.git
 ```
 
-Next, open config.toml in the base of the Hugo site and ensure the theme option is set to KeepIt:
+Or, make this repository a submodule of your site directory.
+
+```bash
+  git submodule add https://github.com/dillonzq/LoveIt.git themes/LoveIt
+```
+
+Next, open `config.toml` in the base of the Hugo site and ensure the theme option is set to KeepIt:
 
 ```bash
   theme = "LoveIt"
@@ -58,24 +77,25 @@ For more information read the [official setup guide](https://gohugo.io/documenta
 
 Take a look in the `exampleSite` folder.
 
-This directory contains an example config file and the content for the demo. It serves as an example setup for your documentation.
+This directory contains an example config file and the content for the demo for `en` and `zh` languages.
+It serves as an example setup for your website.
 
-Copy the `config.toml` in the root directory of your website. Overwrite the existing config file if necessary.
+Copy the `config.toml` to the root directory of your website. Overwrite the existing config file if necessary.
 
 ## Content Suggestions
 
 A few suggestions to help you get a good looking site quickly:
 
-* Keep blog posts in the content/posts directory, for example: content/posts/my-first-post.md
-* Keep static pages in the content directory, for example: content/about.md
-* Keep media like images in the static directory, for example: static/images/2019/10/screenshot.png
+* Keep blog posts in the `content/posts` directory, for example: `content/posts/my-first-post.md`
+* Keep static pages in the `content` directory, for example: `content/about.md`
+* Keep media like images in the `static` directory, for example: `static/images/2019/9/screenshot.png`
 
 ## Customizing styles for your website
 
 If you want to change some styling to fit your own website needs, you can edit them:
 
-* `assets/css/_varibales/default.scss`:  You can override the variables in `_variables.scss` to customize the style
-* `assets/css/_custom.scss` :  You can put your custom css in this file
+* `assets/css/_varibales.scss`: You can override the variables in `_variables.scss` to customize the style
+* `assets/css/_custom.scss`: You can put your custom css in this file
 
 ## Favicons, Browserconfig, Manifest
 
@@ -90,60 +110,60 @@ It is recommended to put your own favicons
 
 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 for example.
+Customize `browserconfig.xml` and `site.webmanifest` to set theme-color and background-color.
 
 ## Tips
 
-### Set production environment when generating site
+### Set `production` environment when generating site
 
-Because some functions are only in production mode, So you **need to add a production** environment variables when generating your site.
+Because some features are only in production mode, so you need to add a `production` environment variables when generating your site.
 
 ```bash
   HUGO_ENV=production hugo --gc --minify
 ```
 
-### Hugo “extended” Sass/SCSS version required
-
-This theme write style with scss, So you must download and install the “extended” Sass/SCSS version
-
 ### How to toggle dark-light mode
 
-* You can click the sun logo to toggle dark-light mode. In the desktop version the sun logo is to the right and in the mobile version is positioned to the left, close to the site title.
-* If you want to make your own theme toggle-able element, you can create an element with a class `.theme-switch`. See [here](https://github.com/Fastbyte01/KeepIt/blob/master/assets/js/main.js#L32)
+* You can click the circle icon to toggle dark-light mode. In the desktop version the circle icon is to the right and in the mobile version is positioned to the left, close to the site title.
+* If you want to make your own theme toggle-able element, you can create an element with a class `.theme-switch`. See [here](https://github.com/dillonzq/LoveIt/blob/master/assets/js/blog.js#L14)
 
 ## Home Post model
 
-If you want to show posts on index instead of a personal profile, just open config.toml in the base of the Hugo site, add the following line to config.toml
+If you want to show posts on index instead of a personal profile, just open `config.toml`, add the following line:
 
 ```toml
   [params]
-  home_mode = "post" # post or other
+    home_mode = "post"
 ```
 
 ## Add logo and cover for SEO
 
-Add a logo image (127x40) and a cover image (800x600). This images are used for SEO.
+Add a logo image (127x40) and a cover image (800x600) in the `static` directory.
 
 ## Questions, ideas, bugs, pull requests
 
 All feedback is welcome! Head over to the [issue tracker](https://github.com/dillonzq/LoveIt/issues).
 
-For more configuration info or other tips you can see the [wiki](https://github.com/dillonzq/LoveIt/wiki).
-
 ## License
 
-LeaveIt is licensed under the MIT license. Check the LICENSE file for details.
-The following resources are included in the theme:
+LoveIt is licensed under the MIT license. Check the [LICENSE file](https://github.com/dillonzq/LoveIt/blob/master/LICENSE) for details.
 
+Thanks to the authors of following resources included in the theme:
+
+* [Font Awesome](https://fontawesome.com/)
+* [Animate.css](https://daneden.github.io/animate.css/)
 * [lazysizes](https://github.com/aFarkas/lazysizes)
-* [lightGallery](https://github.com/sachinchoolur/lightGallery)
-* [code-prettify](https://github.com/google/code-prettify)
+* [Smooth Scroll](https://github.com/cferdinandi/smooth-scroll)
+* [TypeIt](https://typeitjs.com/)
+* [jQuery](https://github.com/jquery/jquery)
+* [jQuery.countdown](https://github.com/hilios/jQuery.countdown)
+* [Katex](https://katex.org/)
+* [mermaid](https://github.com/knsv/mermaid)
+* [APlayer](https://github.com/MoePlayer/APlayer)
+* [MetingJS](https://github.com/metowolf/MetingJS)
+* [Gitalk](https://github.com/gitalk/gitalk)
+* [Valine](https://valine.js.org/)
 
 ## Author
 
 [Dillon](https://dillonzq.com)
-
-## See Also
-
-* [Hermitt](https://github.com/Track3/hermit)
-* [Goa](https://github.com/shenoybr/hugo-goa)

README.zh.md

@@ -0,0 +1,168 @@
+# LoveIt 主题 | Hugo
+
+[English README](README.md)
+
+[LoveIt](https://github.com/dillonzq/LoveIt) 是一个**简洁**、**优雅**且**高效**的 [Hugo](https://gohugo.io/) 博客主题。
+
+它的原型基于 [LeaveIt 主题](https://github.com/liuzc/LeaveIt/) 和 [KeepIt 主题](https://github.com/liuzc/LeaveIt/)。
+
+![Hugo 主题 LoveIt](exampleSite/static/images/Apple-Devices-Preview.png)
+
+## 主题预览
+
+为了直观地浏览主题特性，这里有一个基于 **LoveIt** 主题渲染的 [预览网站](https://hugo-loveit-zh.netlify.com)。
+
+使用 **LoveIt** 主题的网站：
+
+* [Dillon](https://dillonzq.com)
+* 你的网站
+
+## 特性
+
+* 性能优化：在 [Google PageSpeed Insights](https://developers.google.com/speed/pagespeed/insights) 中， 99/100 的移动设备得分和 100/100 的桌面设备得分
+* 桌面设备 / 移动设备 布局的支持
+* 暗黑 / 明亮 模式
+* 使用基于 JSON-LD 格式 的 SEO SCHEMA 文件进行 SEO 优化
+* 页面和列表保持一致的视觉样式
+* 支持多语言和国际化
+* 支持分页
+* 支持 [Google Analytics](https://analytics.google.com/analytics)
+* 支持 [Disqus](https://disqus.com) 评论系统
+* 支持 [Gitalk](https://github.com/gitalk/gitalk) 评论系统
+* 支持 [Valine](https://valine.js.org/) 评论系统
+* 支持 [Gravatar](https://gravatar.com) 头像
+* 支持本地头像
+* 支持多达 54 种社交链接
+* 支持文章分享
+* 支持搜索引擎的网站验证 (Google, Bind, Yandex and Baidu)
+* 基于 [lazysizes](https://github.com/aFarkas/lazysizes) 自动转换图片为懒加载
+* 基于 Hugo 使用的 chroma 进行代码高亮
+* 使用 [Font Awesome](https://fontawesome.com/) 图标的扩展 Markdown 语法
+* 支持基于 [Katex](https://katex.org/) 的数学公式
+* 支持基于 [mermaid](https://github.com/knsv/mermaid) 的图表和流程图生成功能
+* 支持基于 [APlayer](https://github.com/MoePlayer/APlayer) 和 [MetingJS](https://github.com/metowolf/MetingJS) 的内嵌音乐播放器
+* 支持内嵌 Bilibili 视频
+* 支持多种提醒样式的 shortcode
+* 支持自定义对齐和浮动方式的 shortcode
+* 支持基于 [TypeIt](https://typeitjs.com/) 的打字动画
+* 支持基于 [jQuery.countdown](https://github.com/hilios/jQuery.countdown) 的倒计时动画
+* 支持基于 [Smooth Scroll](https://github.com/cferdinandi/smooth-scroll) 的回到顶部动画
+* 支持 CDN
+* ...
+
+## 快速开始
+
+直接克隆这个代码库到你的 Hugo 主题目录，
+
+```bash
+  cd themes
+  git clone https://github.com/dillonzq/LoveIt.git
+```
+
+或者，把这个代码库作为子模块。
+
+```bash
+  git submodule add https://github.com/dillonzq/LoveIt.git themes/LoveIt
+```
+
+下一步， 打开 Hugo 网站的根目录下的 `config.toml` 文件来把 `theme` 设置为 `LoveIt`：
+
+```bash
+  theme = "LoveIt"
+```
+
+更多信息请查看 Hugo 的 [官方安装指南](https://gohugo.io/documentation/)。
+
+## 网站设置
+
+请看一看 `exampleSite` 目录下的文件。
+
+这个目录包含了 `en` 和 `zh` 两种语言的预览网站配置。它可以作为你的网站的配置模板。
+
+复制 `config.toml` 文件到你的 Hugo 网站代码根目录。必要的话覆盖原始配置文件。
+
+## 目录结构建议
+
+以下是一些方便你清晰管理和生成文章的目录结构建议：
+
+* 保持博客文章存放在 `content/posts` 目录，例如： `content/posts/我的第一篇文章.md`
+* 保持简单的静态页面存放在 `content` 目录，例如： `content/about.md`
+* 保持图片之类的媒体资源存放在 `static` 目录，例如： `static/images/2019/9/screenshot.png`
+
+## 为你的网站自定义样式
+
+如果你想改变一些网站样式来满足你的需求，你可以编辑：
+
+* `assets/css/_varibales.scss`： 你可以覆盖 `_variables.scss` 中的变量来自定义样式
+* `assets/css/_custom.scss`： 你可以把自定义的样式放在这个文件
+
+## 网站图标、浏览器配置、网站清单
+
+强烈建议你把：
+
+* 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)
+
+放在 `/static` 目录。利用 [https://realfavicongenerator.net/](https://realfavicongenerator.net/) 可以很容易地生成这些文件。
+
+可以自定义 `browserconfig.xml` 和 `site.webmanifest` 文件来设置 theme-color 和 background-color。
+
+## 小技巧
+
+### 在生成网站时设置 `production` 环境变量
+
+由于主题的一些功能仅在生产环境有效，所以你需要在生成网站时设置 `production` 环境变量。
+
+```bash
+  HUGO_ENV=production hugo --gc --minify
+```
+
+### 怎样切换网站 暗黑-明亮 模式
+
+* 你可以点击圆形图标来切换网站 暗黑-明亮 模式。桌面模式下圆形图标在网页右上角，移动设备模式下在网站左上角标题旁边
+* 如果你想自定义切换网站 暗黑-明亮 模式的元素，可以使用一个 class 包含 `.theme-switch` 的元素，详见[此处](https://github.com/dillonzq/LoveIt/blob/master/assets/js/blog.js#L14)
+
+## 主页预览文章模式
+
+如果你想在主页显示文章而不仅仅是个人信息，请打开配置文件 `config.toml`，并增加下面一行：
+
+```toml
+  [params]
+    home_mode = "post"
+```
+
+## 增加网站 logo 和封面用于 SEO 优化
+
+增加一个 logo 图片 (127x40) 和一个封面图片 (800x600) 在 `static` 目录。
+
+## 问题、想法、 bugs 和 PRs
+
+所有的反馈都是欢迎的！详见 [issue tracker](https://github.com/dillonzq/LoveIt/issues)。
+
+## 许可协议
+
+LoveIt 根据 MIT 许可协议授权。 更多信息请查看 [LICENSE 文件](https://github.com/dillonzq/LoveIt/blob/master/LICENSE)。
+
+感谢以下在主题中使用过的项目的作者：
+
+* [Font Awesome](https://fontawesome.com/)
+* [Animate.css](https://daneden.github.io/animate.css/)
+* [lazysizes](https://github.com/aFarkas/lazysizes)
+* [Smooth Scroll](https://github.com/cferdinandi/smooth-scroll)
+* [TypeIt](https://typeitjs.com/)
+* [jQuery](https://github.com/jquery/jquery)
+* [jQuery.countdown](https://github.com/hilios/jQuery.countdown)
+* [Katex](https://katex.org/)
+* [mermaid](https://github.com/knsv/mermaid)
+* [APlayer](https://github.com/MoePlayer/APlayer)
+* [MetingJS](https://github.com/metowolf/MetingJS)
+* [Gitalk](https://github.com/gitalk/gitalk)
+* [Valine](https://valine.js.org/)
+
+## 作者
+
+[Dillon](https://dillonzq.com)

assets/css/_page/_post.scss

@@ -159,7 +159,7 @@
   .post-dummy-target:target {
     display: inline-block;
     position: relative;
-    top: -5.4rem;
+    top: -5.6rem;
     visibility: hidden;
   }