
接下来,我们看一下如何在静态博客添加Google Analytics和RSS。
Google Analytics
首先你需要去Google Analytics 创建一个property。跟随默认的创建步骤,总体应该都比较简单明了。
创建之后可以在Data Collection的步骤指明你的博客地址:
同时,你可以找到你这个property的measurement ID,大概是G-xxxxxxxxxx的格式
接下来,回到你自己的博客文件,如果你是按照之前的攻略设立的网站,找到\themes\dream\layouts\partials\head.html,这里如果你用了不同的主题那么要更换对应的路径。在head.html的最后添加以下段落:
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-xxxxxxxxxx"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-xxxxxxxxxx');
</script>
记得把其中的G-xxxxxxxxxx替换成你的measurement ID。这样就可以了。你应该很快可以在Google Analytcis的界面看到网站的流量信息。
RSS
添加RSS订阅按钮其实有多种办法,这里就介绍其中一种在header添加的方式,仅供参考。
首先需要确保你的博客网站生成xml文件。找到你的hugo.toml文件,添加以下段落:
[outputs]
home = ["HTML", "RSS"]
然后找到\themes\dream\layouts\partials\nav.html。找到这个部分:
{{ if not site.Params.collapseNavItems }}
{{ range $navItems }}
{{ partial "renderNavItem.html" . }}
{{ end }}
{{ with site.Params.navItems }}
{{ partial "navCustomItems.html" (dict "navItems" $navItems "mobile" false) }}
{{ end }}
在这个段落之后添加如下内容:
<a href="/index.xml" title="RSS Feed" class="hover:opacity-80" style="display: flex; align-items: center;">
<img src="https://www.iconsdb.com/icons/preview/orange/rss-xxl.png" alt="RSS" style="height:20px;">
</a>
这里你也可以把src指明的图标换成本地文件,比如img/rss.jpg。这样就可以在header看到订阅RSS的标记和对应的链接了。