OpenSource/LoveIt
1
0
Fork 0
mirror of https://github.com/dillonzq/LoveIt.git synced 2024-11-14 10:56:16 +01:00
Code Issues Projects Releases Packages Wiki Activity
LoveIt/README.zh.md

6.3 KiB
Raw Blame History

LoveIt 主题 | Hugo

English README

LoveIt 是一个简洁、优雅且高效的 Hugo 博客主题。

它的原型基于 LeaveIt 主题 和 KeepIt 主题。

Hugo 主题 LoveIt

主题预览

为了直观地浏览主题特性，这里有一个基于 LoveIt 主题渲染的 预览网站。

使用 LoveIt 主题的网站：

特性

  • 性能优化：在 Google PageSpeed Insights 中， 99/100 的移动设备得分和 100/100 的桌面设备得分
  • 桌面设备 / 移动设备 布局的支持
  • 暗黑 / 明亮 模式
  • 使用基于 JSON-LD 格式 的 SEO SCHEMA 文件进行 SEO 优化
  • 页面和列表保持一致的视觉样式
  • 支持多语言和国际化
  • 支持分页
  • 支持 Google Analytics
  • 支持 Disqus 评论系统
  • 支持 Gitalk 评论系统
  • 支持 Valine 评论系统
  • 支持 Gravatar 头像
  • 支持本地头像
  • 支持多达 54 种社交链接
  • 支持文章分享
  • 支持搜索引擎的网站验证 (Google, Bind, Yandex and Baidu)
  • 基于 lazysizes 自动转换图片为懒加载
  • 基于 Hugo 使用的 chroma 进行代码高亮
  • 使用 Font Awesome 图标的扩展 Markdown 语法
  • 支持基于 Katex 的数学公式
  • 支持基于 mermaid 的图表和流程图生成功能
  • 支持基于 APlayer 和 MetingJS 的内嵌音乐播放器
  • 支持内嵌 Bilibili 视频
  • 支持多种提醒样式的 shortcode
  • 支持自定义对齐和浮动方式的 shortcode
  • 支持基于 TypeIt 的打字动画
  • 支持基于 jQuery.countdown 的倒计时动画
  • 支持基于 Smooth Scroll 的回到顶部动画
  • 支持 CDN
  • ...

快速开始

直接克隆这个代码库到你的 Hugo 主题目录，

  cd themes
  git clone https://github.com/dillonzq/LoveIt.git

或者，把这个代码库作为子模块。

  git submodule add https://github.com/dillonzq/LoveIt.git themes/LoveIt

下一步， 打开 Hugo 网站的根目录下的 config.toml 文件来把 theme 设置为 LoveIt：

  theme = "LoveIt"

更多信息请查看 Hugo 的 官方安装指南。

网站设置

请看一看 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/ 可以很容易地生成这些文件。

可以自定义 browserconfig.xml 和 site.webmanifest 文件来设置 theme-color 和 background-color。

小技巧

在生成网站时设置 production 环境变量

由于主题的一些功能仅在生产环境有效，所以你需要在生成网站时设置 production 环境变量。

  HUGO_ENV=production hugo --gc --minify

怎样切换网站 暗黑-明亮 模式

  • 你可以点击圆形图标来切换网站 暗黑-明亮 模式。桌面模式下圆形图标在网页右上角，移动设备模式下在网站左上角标题旁边
  • 如果你想自定义切换网站 暗黑-明亮 模式的元素，可以使用一个 class 包含 .theme-switch 的元素，详见此处

主页预览文章模式

如果你想在主页显示文章而不仅仅是个人信息，请打开配置文件 config.toml，并增加下面一行：

  [params]
    home_mode = "post"

增加网站 logo 和封面用于 SEO 优化

增加一个 logo 图片 (127x40) 和一个封面图片 (800x600) 在 static 目录。

问题、想法、 bugs 和 PRs

所有的反馈都是欢迎的！详见 issue tracker。

许可协议

LoveIt 根据 MIT 许可协议授权。 更多信息请查看 LICENSE 文件。

感谢以下在主题中使用过的项目的作者：

作者

Dillon