前言

博客部署完成后,恭喜你可以发表第一篇:Hello world!但是LoveIt这么好用的主题,不配置一番可惜了。

基本功能配置

主题配置最好参考已有的配置,比如LoveIt作者写的介绍,还有主题目录下的配置文件\themes\LoveIt\exampleSite\config.toml文件。

笔者认为一些配置项解释的不够清楚,所以将网站的源码放在了Github上,仅供参考。

下面介绍其中一些配置。

双语言配置

配置后需要每篇文章存在多个语言的文件,否则会报错。

例如:content\about\index.en.mdcontent\about\index.zh-cn.md

Gravatar头像

gravatar头像注册,需要使用wordpress帐号,注册帐号时,有些邮箱的邮件会被过滤,使用163邮箱等了1个多小时方才收到注册的邮件。

图片画廊功能

在配置文件config.toml中开启lightgallery

# 是否使用 lightgallery
lightgallery = true

或者在文章的头部参数中设置lightgallery: true

最后文章中的图片引用格式为:![weichat](/images/weichat-logo_500px.png "公众号"),注意路径后面要加"内容"。

搜索配置

使用algolia作为搜索引擎,因为lunr的加载速度会让你等到花都谢了。虽然algolia需要上传index.json,但是可以使用Algolia Atomic简化操作。

评论系统设置

国内不能用disqus,不过还有Valine评论系统。留言可以设置邮件提醒功能,但是LeanCloud的云引擎域名需要使用自己的域名并配置DNS解析。

社交信息设置

首页的社交信息,不同语言的界面,可分别设置。

社交信息拓展

以微信公众号为例。

config.toml的社交信息中添加

# 作者的社交信息设置
[social]
...
Wechat = "https://img.xiaodejiyi.com/img/wechat%20logo_500px.png"
...

配置themes\LoveIt\assets\data\social.yml:

# 064: wechat
wechat:
# weight值排序
Weight: 2
Title: 公众号
Newtab: true
Icon:
Simpleicons: wechat

其中图标可参考其他形式,如:

# Src形式
cnblog:
Weight: 1
Prefix: https://www.cnblogs.com/
Title: 博客园
Icon:
# themes\LoveIt\assets\svg\icons\cnblog.svg
Src: svg/icons/cnblog.svg
# fontawesome class形式
mastodon:
Weight: 56
Prefix: https://mastodon.social/
Title: Mastodon
Icon:
Class: fab fa-mastodon fa-fw
# Simpleicons
googlescholar:
Weight: 54
Template: https://scholar.google.com/citations?%v
Title: Google Scholar
Icon:
# themes\LoveIt\assets\lib\simple-icons
Simpleicons: googlescholar

使用站长工具,向搜索引擎提交网站地图

让搜索引擎收录网站内容。

# 网站验证代码,用于 Google/Bing/Yandex/Pinterest/Baidu
[verification]
google = "xxxxxxxxxxxxxxxx"
bing = ""
yandex = ""
pinterest = ""
baidu = "code-xxxxxxx"

网站统计与分析

网站流量分析

分析网站点击流量,访客IP等数据。

  1. Google Analytics
  2. 百度统计

注册后,需要先添加DNS解析,验证域名所有权,可能会与其他解析记录存在冲突。

解决方法,暂停其他解析,验证所有权通过后,在网站分析中配置ID,最后删除验证的DNS解析,重新开启其他冲突的解析记录。

#  Google网站分析配置
[analytics]
enable = true
# Google Analytics
[analytics.google]
id = "G-xxxxxxx"
# 是否匿名化用户 IP
anonymizeIP = true

百度统计需要在网站代码中加入百度的统计代码,可以在themes\LoveIt\layouts\partials\plugin\analytics.html中添加以下代码。

{{- /* baidu Analytics */ -}}
<script>
var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
# 需要修改为自己的url
hm.src = "https://hm.baidu.com/hm.js?9c04b6d35915817e67da8ad2fdcfbfdf";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();
</script>
# 下面网站访问数量统计中,友盟+和51LA也可以加在这里。
{{- /* 51la Analytics */ -}}
<script type="text/javascript" src="//js.users.51.la/21009067.js"></script>

网站访问数量统计

对比样式之后,选择了51LA统计。也可以用JS修改统计的样式。

这三个访问统计都需要在网站代码中加入统计的JS代码。注册后,获取JS统计代码,可以和网站流量分析中百度分析一样加到themes\LoveIt\layouts\partials\plugin\analytics.html中。

  1. 不算子

    样式:

    本文总阅读量929966次

    本站总访问量3152598次

    本站总访客数672421人

  2. 友盟+

    互联网数据服务平台缔元信和CNZZ合并成为友盟+。

    样式:

    站长统计 | 今日IP[43] | 今日PV[191] | 昨日IP[31] | 昨日PV[133] | 当前在线[5]

  3. 51LA

    样式:

    总访问量 21,195,本月访问量 2,820,昨日访问量 93,今日访问量 103,当前在线 4

分类页文章总数

themes\LoveIt\layouts\_default\section.html中添加以下代码:

<!-- articles -->
<span style="font-size:.8rem;font-weight:500;">
{{- len ( where .Site.RegularPages "Section" "posts" ) | dict "Nums" | T "totalPageNums" -}}
</span>

Ti18n函数是翻译函数,按照不同的语言,使用对应语言的字符串。参考i18n

i18n配置为:

# themes\LoveIt\i18n\zh-CN.toml
[totalPageNums]
other = "共 {{ .Nums }} 篇文章" # themes\LoveIt\i18n\en.toml
[totalPageNums]
other = " {{ .Nums }} articles"

网站总字数统计

参考Hugo 总文章数和总字数

底部链接设计

关于知识共享许可协议

可以看这篇“知识共享”(CC协议)简单介绍,笔者最终决定采用:知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议。

网站运行时间

themes\LoveIt\layouts\partials\footer.html中加入以下代码。

{{- /* Hugo and LoveIt */ -}}
{{- if ne .Site.Params.footer.hugo false -}}
<div class="footer-line">
# 运行时间在这里
<span id="timeDate">{{ T "worktime" }}&nbsp;|&nbsp;</span>
<script>
var now = new Date();
function createtime() {
var start_time= new Date("09/16/2020 00:00:00");
now.setTime(now.getTime()+250);
days = (now - start_time ) / 1000 / 60 / 60 / 24; dnum = Math.floor(days);
var worktime = document.getElementById("timeDate").innerHTML.replace(/time/, Math.floor(days));
document.getElementById("timeDate").innerHTML = worktime ;
}
createtime();
</script>
{{- $hugo := printf `<a href="https://gohugo.io/" target="_blank" rel="noopener noreffer" title="Hugo %v">Hugo</a>` hugo.Version -}}
{{- $theme := .Scratch.Get "version" | printf `<a href="https://github.com/dillonzq/LoveIt" target="_blank" rel="noopener noreffer" title="LoveIt %v"><i class="far fa-kiss-wink-heart fa-fw"></i> LoveIt</a>` -}}
{{- dict "Hugo" $hugo "Theme" $theme | T "poweredBySome" | safeHTML }}
</div>
{{- end -}}

i18n配置为:

# themes\LoveIt\i18n\zh-CN.toml
[worktime]
other = "运行 time 天" # themes\LoveIt\i18n\en.toml
[worktime]
other = "Almost time days."

小徽章

如果你喜欢这样的小徽章,前往shield进行DIY吧!参考动态小牌子制作

第三方库配置

使用jsdelivr加速第三方库文件的加载。

LoveIt主题对cdn文件的加载过程是这样的。

  1. 配置文件中补充cdn文件名称,可以直接复制主题的cdn文件到blog的assets/data/cdn/目录下。
[params.cdn]
# CDN 数据文件名称, 默认不启用
# ("jsdelivr.yml")
# 位于 "themes/LoveIt/assets/data/cdn/" 目录
# 可以在你的项目下相同路径存放你自己的数据文件:
# "assets/data/cdn/"
data = ""
  1. themes\LoveIt\layouts\partials\init.html中读取cdn文件中的数据,.Scratch.Set "cdn" $cdn设置全局变量,之后在其他文件中使用.Scratch.Get "cdn"获取cdn数据。
  2. themes\LoveIt\layouts\partials\assets.html将cdn中的第三方库渲染后,追加在页面结尾部分。

调用JS的三种方法

  1. 查找jsdelivr已有的第三方库,加入jsdelivr.yml中。
  2. themes\LoveIt\layouts\partials\assets.html中添加jquery.min.js,需要jquery文件位于assets\js\jquery.min.js
{{- /* custom jquery */ -}}
{{- $source := $cdn.jqueryJS | default ( resources.Get "js/jquery.min.js" ) -}}
{{- dict "Source" $source "Fingerprint" $fingerprint | dict "Scratch" .Scratch "Data" | partial "scratch/script.html" -}}
  1. 配置文件中添加第三方库配置
#  第三方库配置
[page.library]
[page.library.css]
# someCSS = "some.css"
# 位于 "assets/"
# 或者
# someCSS = "https://cdn.example.com/some.css"
# css路径:assets\css\custom.css
customCSS = "css/custom.css" [page.library.js]
# someJavascript = "some.js"
# 位于 "assets/"
# 或者
# someJavascript = "https://cdn.example.com/some.js" customJS = "js/custom.js"

完成以上配置后,可满足很多功能需求。但如果要拓展主题功能,像分类列表页面,则需要学习Hugo语法。

参考

使用Hugo框架搭建博客的过程 - 主题配置的更多相关文章

  1. 使用Hugo框架搭建博客的过程 - 页面模板

    前言 最初在制作友链界面时,没有学习Hugo框架,一头雾水.网上有关的教程甚少,只能去学一遍Hugo. 在学习Hugo的过程中,了解了列表模板,分类模板.开发了几个功能页面,如:留言板,友链,记忆分类 ...

  2. 使用Hugo框架搭建博客的过程 - 前期准备

    前言 这篇教程介绍了如何搭建这样效果的博客. 所需步骤 可以从这样的角度出发: 注册域名. 使用CDN加快网站访问速度. 网站内容需要部署在服务器或对象存储平台上. 重要的是放什么内容.博客需要选择框 ...

  3. 使用Hugo框架搭建博客的过程 - 功能拓展

    前言 本文介绍一些拓展功能,如文章页面功能增加二级菜单,相关文章推荐和赞赏.另外,使用脚本会大大简化写作后的上传流程. 文章页面功能 这部分功能的拓展主要是用前端的JS和CSS,如果对前端不了解,可以 ...

  4. 使用Hugo框架搭建博客的过程 - 部署

    前言 完成前期的准备工作后,在部署阶段需要配置服务器或对象存储服务. 对象存储和服务器对比 对象存储平台 国内有阿里云OSS.腾讯COS.又拍云.七牛云等.国外有Github Pages.Netlif ...

  5. 用 Hugo 快速搭建博客

    用 Hugo 搭建博客 Hugo 是一个用 Go 编写的静态站点生成器,生成速度很快 下面是具体操作: 1.安装 Hugo Windows 用户 使用 Chocolatey 或者 Scoop 快速安装 ...

  6. 在Windows下使用Hexo+GithubPage搭建博客的过程

    1.安装Node.js 下载地址:传送门 去 node.js 官网下载相应版本,进行安装即可. 可以通过node -v的命令来测试NodeJS是否安装成功 2.安装Git 下载地址:传送门 去 Git ...

  7. 使用Hexo框架搭建博客,并部署到github上

    开发背景:年后回来公司业务不忙,闲暇时间了解一下node的使用场景,一篇文章吸引了我15个Nodejs应用场景,然后就被这个hexo框架吸引了,说时迟,那时快,赶紧动手搭建起来,网上找了好多资料一天时 ...

  8. Hugo hexo 搭建博客系列1:自己的服务器

    hexo jekyll https://hexo.io/zh-cn/ http://theme-next.iissnan.com/getting-started.html Hexo 是高效的静态站点生 ...

  9. hugo + nginx 搭建博客记录

    作为一个萌新Gopher,经常逛网站能看到那种极简的博客,引入眼帘的不是花里胡哨的图片和样式,而是黑白搭配,简简单单的文章标题,这种风格很吸引我.正好看到煎鱼佬也在用这种风格的博客,于是卸载了我的wo ...

随机推荐

  1. springboot项目部署docker服务器提供api

    1.先将springboot项目打包,我这里用的是IDEA工具打包,打包完成后的jar包在 项目目录/target 中 2.打包完成后进入服务器器终端,将jar包上传到自己设置的目录中,这个目录需要跟 ...

  2. linux免密传输文件 nc

    nc命令很强大,用来在内网传输小文件也不错,最主要的是仅一次传输的情况下不需要用户和密码即可直接接受与发送文件 不管是linux2linux 还是 linux2windows皆可 先决条件: 1.使用 ...

  3. java学习之旅

    jar文件其实就是一个压缩包,里面包含很多class文件(一个class文件是一个类的字节码).方便在网络上传输.可以规定版本号,更容易进行版本控制. var只能在方法内使用,不能用于定义成员变量. ...

  4. Cannot resolve class or package 'mysql’处理方法

    在application.properties中配置mybatis_plus碰见报了这个错误 Cannot resolve class or package 'jdbc' 错误产生的原因 其实这个问题 ...

  5. 浅析IOC 和 DI

    学习过spring框架的人一定都会听过Spring的IoC(控制反转) .DI(依赖注入)这两个概念,对于初学Spring的人来说,总觉得IoC .DI这两个概念是模糊不清的,是很难理解的,今天和大家 ...

  6. 情景剧:C/C++中的未定义行为(undefined behavior)

    写在前面 本文尝试以情景剧的方式,轻松.直观地解释C/C++中未定义行为(undefined behavior)的概念.设计动机.优缺点等内容1,希望读者能够通过阅读本文,对undefined beh ...

  7. Deep Learning部署TVM Golang运行时Runtime

    Deep Learning部署TVM Golang运行时Runtime 介绍 TVM是一个开放式深度学习编译器堆栈,用于编译从不同框架到CPU,GPU或专用加速器的各种深度学习模型.TVM支持来自Te ...

  8. 2D池化IPoolingLayer

    2D池化IPoolingLayer IPooling层在通道内实现池化.支持的池类型为最大, 平均 和 最大平均混合. 层描述:二维池化 使用张量上的2D滤波器计算池化a tensor A, of d ...

  9. CVPR2020:点云分类的自动放大框架PointAugment

    CVPR2020:点云分类的自动放大框架PointAugment PointAugment: An Auto-Augmentation Framework for Point Cloud Classi ...

  10. 英特尔Intel® Arria® 10 FPGA加速器设计

    英特尔Intel Arria 10 FPGA加速器设计 Introducing the Intel Vision Accelerator Design with Intel Arria 10 FPGA ...