本文记录在 Fluid 主题中加入 Umami 点击事件统计的方法。
umami--event--name
类名umami--click--name
类名123 | <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> |
---|
event_key
12345 | 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
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859 | <!-- 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"> <i class="iconfont icon-search"></i> </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"> <i class="iconfont icon-dark" id="color-toggle-icon"></i> </a> </li> <% } %> </ul> </div> |
---|