zoukankan      html  css  js  c++  java
  • 使用Hugo框架搭建博客的过程

    前言

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

    基本功能配置

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

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

    下面介绍其中一些配置。

    双语言配置

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

    例如:contentaboutindex.en.mdcontentaboutindex.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"
        ...
    

    配置themesLoveItassetsdatasocial.yml:

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

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

    # Src形式
    cnblog:
      Weight: 1
      Prefix: https://www.cnblogs.com/
      Title: 博客园
      Icon:
      # themesLoveItassetssvgiconscnblog.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:
      # themesLoveItassetslibsimple-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
    

    百度统计需要在网站代码中加入百度的统计代码,可以在themesLoveItlayoutspartialspluginanalytics.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统计代码,可以和网站流量分析中百度分析一样加到themesLoveItlayoutspartialspluginanalytics.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

    分类页文章总数

    themesLoveItlayouts\_defaultsection.html中添加以下代码:

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

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

    i18n配置为:

    # themesLoveIti18nzh-CN.toml
    [totalPageNums]
    other = "共 {{ .Nums }} 篇文章"
    
    # themesLoveIti18nen.toml
    [totalPageNums]
    other = " {{ .Nums }} articles"
    

    网站总字数统计

    参考Hugo 总文章数和总字数

    底部链接设计

    关于知识共享许可协议

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

    网站运行时间

    themesLoveItlayoutspartialsfooter.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配置为:

    # themesLoveIti18nzh-CN.toml
    [worktime]
    other = "运行 time 天"
    
    # themesLoveIti18nen.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. themesLoveItlayoutspartialsinit.html中读取cdn文件中的数据,.Scratch.Set "cdn" $cdn设置全局变量,之后在其他文件中使用.Scratch.Get "cdn"获取cdn数据。
    2. themesLoveItlayoutspartialsassets.html将cdn中的第三方库渲染后,追加在页面结尾部分。

    调用JS的三种方法

    1. 查找jsdelivr已有的第三方库,加入jsdelivr.yml中。
    2. themesLoveItlayoutspartialsassets.html中添加jquery.min.js,需要jquery文件位于assetsjsjquery.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路径:assetscsscustom.css
        customCSS = "css/custom.css"
    
        [page.library.js]
        # someJavascript = "some.js"
        # 位于 "assets/"
        # 或者
        # someJavascript = "https://cdn.example.com/some.js"
    
        customJS = "js/custom.js"
    

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

    参考

  • 相关阅读:
    SCCM 补丁更新 失误排错一例
    Oracle 远程连接 DB配置 连接命令
    反向代理服务器
    用JMF播放音频 例子
    HTML css兼容
    Java国际化
    JBPM 之介绍,使用
    Nginx内核优化引用
    Nginx 学习
    局域网访问VMware虚拟机中的Ubuntu
  • 原文地址:https://www.cnblogs.com/langyao/p/14285886.html
Copyright © 2011-2022 走看看