搭建静态博客05:Google Analytics和RSS

2025-06-22T11:29:55-04:00 | 1分钟阅读 | 更新于 2025-06-22T11:29:55-04:00

@
搭建静态博客05:Google Analytics和RSS

接下来,我们看一下如何在静态博客添加Google Analytics和RSS。

Google Analytics

首先你需要去Google Analytics 创建一个property。跟随默认的创建步骤,总体应该都比较简单明了。

创建之后可以在Data Collection的步骤指明你的博客地址:

在GA中指明博客地址
在GA中指明博客地址

同时,你可以找到你这个property的measurement ID,大概是G-xxxxxxxxxx的格式

找到measurement ID
找到measurement ID

接下来,回到你自己的博客文件,如果你是按照之前的攻略设立的网站,找到\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的标记和对应的链接了。

RSS标记出现在header
RSS标记出现在header

© 2025 - 2026 Leona的田园牧歌

🌱 Powered by Hugo with theme Dream.

关于我

Leona

  • 女的。
  • INFJ。
  • 长毛象链接点这里!
  • 做了八年数据科学家,但是每次管自己叫”科学家“,都很羞愧。职业+J人,习惯把日常生活数据化。
  • 玩了十几年相机,三十岁以前拍人像擅长无痕修图,三十岁以后拍动物植物大自然。
  • 厌倦城市,旅行目标大多是看动物。
  • 嘴太叼,不好吃宁愿饿着,还好手艺不错,不会饿死自己。
  • 没体能天赋,从小长跑最后一名,但是热爱运动,练过跑步、举铁、泰拳、网球、crossfit,现在重心转向功能性训练。
  • 现阶段人生目标是找个山头归隐,自给自足,田园牧歌,种菜养花,遛猫逗狗,养鸡喂牛。