Fluid -32- 配置 Umami 事件统计显示

本文最后更新于：2023年8月8日中午

本文记录在 Fluid 主题中加入 Umami 点击事件统计的方法。

Umami 配置

需要安装 Umami
建议升级到 1.39 以上版本，支持事件显示

修改主题

我准备统计导航、 Footer 的点击事件
需要对主题配置文件和主题文件做出一些修改

原理

为了操作简单，我们采用修改 CSS 类的方式
为想要统计的事件元素上添加 umami--event--name 类名

配置文件修改

为想要监控的链接添加点击事件监控代码
添加 umami--click--name 类名

1
2
3

<a href="https://hexo.io" target="_blank" rel="nofollow noopener" color="#d7d8d9"><span class="umami--click--Footer-Hexo">Hexo</span></a>
<i class="iconfont icon-love"></i>
<a href="https://github.com/fluid-dev/hexo-theme-fluid" target="_blank" rel="nofollow noopener"><span class="umami--click--Footer-Fluid">Fluid</span></a>

在 menu 中的值中添加键值 event_key

menu:
  - { key: "home", link: "/", icon: "iconfont icon-home-fill", event_key : "Navigation-Homepage"}
  - { key: "archive", link: "/archives/", icon: "iconfont icon-archive-fill" , event_key : "Navigation-Archive"}
  - { key: "category", link: "/categories/", icon: "iconfont icon-category-fill" , event_key : "Navigation-Category"}
  - { key: "tag", link: "/tags/", icon: "iconfont icon-tags-fill" , event_key : "Navigation-Tag"}

修改 fluid\layout\_partials\header\navigation.ejs 文件
需要在 nav-item 和 dropdown-item 类的元素里套个 div 添加 umami 的类名，在其中自动读取主题配置文件中的 event_key

<!-- Collapsible content -->
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav ml-auto text-center">
        <% for(const each of theme.navbar.menu || []) { %>
          <% if (!each.submenu && !each.link) continue %>
          <% var text = each.name || __(each.key + '.menu') || __(each.key + '.title') %>
          <% if (text.indexOf('.menu') !== -1 || text.indexOf('.title') !== -1) {
            text = each.key
          } %>
          <% if (each.submenu) { %>
            <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle" target="_self" href="javascript:;" role="button"
                 data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                <%- each.icon ? '<i class="' + each.icon + '"></i>' : '' %>
                <%- text %>
              </a>
              <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                <% for(const subEach of each.submenu || []) { %>
                  <% if (!subEach.link) continue %>
                  <% var subText = subEach.name || __(subEach.key + '.title') %>
                  <% if (subText.indexOf('.title') !== -1) {
                    subText = subEach.key
                  } %>
				  <div class = "umami--click--<%- subEach.event_key %>">
                  <a class="dropdown-item" href="<%= url_for(subEach.link) %>">
                    <%- subEach.icon ? '<i class="' + subEach.icon + '"></i>' : '' %>
                    <%- subText %>
                  </a>
				  </div>
                <% } %>
              </div>
            </li>
          <% } else { %>
            <li class="nav-item">
			<div class = "umami--click--<%- each.event_key %>">
              <a class="nav-link" href="<%= url_for(each.link) %>">
                <%- each.icon ? '<i class="' + each.icon + '"></i>' : '' %>
                <%- text %>
              </a>
			  </div>
            </li>
          <% } %>
        <% } %>
        <% if(theme.search.enable) { %>
          <li class="nav-item" id="search-btn">
            <a class="nav-link" target="_self" href="javascript:;" data-toggle="modal" data-target="#modalSearch" aria-label="Search">
              &nbsp;<i class="iconfont icon-search"></i>&nbsp;
            </a>
          </li>
          <% import_js(theme.static_prefix.internal_js, 'local-search.js') %>
        <% } %>
        <% if(theme.dark_mode && theme.dark_mode.enable) { %>
          <li class="nav-item" id="color-toggle-btn">
            <a class="nav-link" target="_self" href="javascript:;" aria-label="Color Toggle">&nbsp;<i
                class="iconfont icon-dark" id="color-toggle-icon"></i>&nbsp;</a>
          </li>
        <% } %>
      </ul>
    </div>