门户系统中系统统计Matomo配置

Xplorist Lv6

2020-12-18 15:41:00 2020-12-18 15:41

Matomo

Matomo

门户系统中系统统计Matomo配置

wiki信息

创建时间： 2020-07-16
最近修改时间： 2020-12-18
当前版本: v1.0.2
wiki作者：向波任(C3005579)
联系电话：5073+66948
联系邮箱: mcebg-mac1-miscdsys2@mail.foxconn.com

关于Matomo

Matomo简介

Google Analytics alternative that protects your data and your customers’ privacy
Take back control with Matomo – a powerful web analytics platform that gives you 100% data ownership.
Matomo是一个强大的web统计分析平台，一款替代Google Analytics的产品。
相比于Google Analytics，使用Matomo可以让你拿回控制权，给你100%的数据拥有权，从而保护你的数据和客户隐私。

参考网址

查询有效系统的SQL

select t.name,
       t.url,
       t.list_order,
       t.matomo_site_id,
       t.create_time,
       t.rowid
  from SYSTEM_INFO t
 where t.url is not null
   and t.url like 'http://%'
 order by t.list_order asc, t.create_time asc

通用配置

传统web项目配置

传统web项目解释：非SPA单页应用web项目

系统开发者注意事项

传统web项目，要统计的每个页面必须都加上HTML中的配置，这个配置相当于让该系统添加一个matomo.js,并使用这个js文件去发送相应采集数据的请求。
【登录系统后的首页】必须加HTML配置和JavaScript中的配置。
对于某个老板很重视的页面，需要收集这个页面的访问量，需要加上【特定页面】中的配置。
代码中有【要修改】注释的代码行，注意看注释进行修改。
非常重要的修改：_paq.push([‘setSiteId’, ‘xxxTheSiteId’]);中的xxxTheSiteId要修改为该系统的关键变量值中的siteId值，如果这个xxxTheSiteId这个值没有改或者乱填，Matomo系统会采集错误数据，所以要特别注意

登录系统后的首页

HTML(配置在HTML的</head>前面)

<!-- Matomo -->
<script type="text/javascript">
  var _paq = window._paq || [];
  /* tracker methods like "setCustomDimension" should be called before "trackPageView" */
  _paq.push(['trackPageView']);
  _paq.push(['enableLinkTracking']);
  (function() {
    var u="//10.244.231.138/matomo/";
    _paq.push(['setTrackerUrl', u+'matomo.php']);
    _paq.push(['setSiteId', 'xxxTheSiteId']);// 【要修改】'xxxTheSiteId'为matomo系统中注册的站点id，不能乱写
    var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
    g.type='text/javascript'; g.async=true; g.defer=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
  })();
</script>
<!-- End Matomo Code -->

JavaScript(分别配置在登录登出请求后的js代码中)

// 添加登录后的用户工号到matomo系统中
var currentUrl = location.href;
_paq.push(['setCustomUrl', currentUrl]);
_paq.push(['setUserId', xxxTheUserId]);// 【要修改】xxxTheUserId是从后端获取的登录账号id（一般为用户工号）
_paq.push(['trackPageView']);
_paq.push(['enableLinkTracking']);

// 退出登录后在matomo系统中重置用户id
_paq.push(['resetUserId']);
_paq.push(['appendToTrackingUrl', 'new_visit=1']); 
_paq.push(['trackPageView']);
_paq.push(['appendToTrackingUrl', '']);

特定页面

HTML(配置在HTML的</head>前面)

<!-- Matomo -->
<script type="text/javascript">
  var _paq = window._paq || [];
  /* tracker methods like "setCustomDimension" should be called before "trackPageView" */
  var currentUrl = location.href;
  _paq.push(['setCustomUrl', currentUrl]);
  _paq.push(['setCustomVariable', 1, 'PageName', 'XXX页面名称', 'page']);// 【要修改】XXX页面名称为需要制定统计的页面名称或模块名称，不能乱写，不然统计数据会出问题
  _paq.push(['trackPageView']);
  _paq.push(['enableLinkTracking']);
  (function() {
    var u="//10.244.231.138/matomo/";
    _paq.push(['setTrackerUrl', u+'matomo.php']);
    _paq.push(['setSiteId', 'xxxTheSiteId']);// 【要修改】'xxxTheSiteId'为matomo系统中注册的站点id，不能乱写
    var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
    g.type='text/javascript'; g.async=true; g.defer=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
  })();
</script>
<!-- End Matomo Code -->

单页应用SPA项目配置

单页应用SPA项目解释：例如Vue-Cli创建的SPA项目，就是单页应用SPA项目，具体单页应用SPA项目的概念请自行Google或百度
以下为Vue-Cli创建的SPA项目的配置，其它技术栈如React，Angular(不是AngularJS)，请联系本手册创建人或自行Google或百度。

系统开发者注意事项

Vue-Cli创建的SPA项目，main.js中必须都加上全局配置，这个配置相当于让该系统添加一个matomo.js,并使用这个js文件去发送相应采集数据的请求。
【登录登出用户账号配置】必须配置，登录后采集访问者的用户id，登出后重置用户id。
对于某个老板很重视的页面，需要收集这个页面的访问量，需要加上【特定路由配置】中的配置。
代码中有【要修改】注释的代码行，注意看注释进行修改。
非常重要的修改：_paq.push([‘setSiteId’, ‘xxxTheSiteId’]);中的xxxTheSiteId要修改为该系统的关键变量值中的siteId值，如果这个xxxTheSiteId这个值没有改或者乱填，Matomo系统会采集错误数据，所以要特别注意

全局配置

main.js

var _paq = _paq || []
window._paq = _paq
/* tracker methods like "setCustomDimension" should be called before "trackPageView" */
var currentUrl = location.href;
_paq.push(['setCustomUrl', currentUrl]);
_paq.push(['trackPageView']);
_paq.push(['enableLinkTracking']);// 这句末尾的分号(;)一定要加上，不然运行会报错

(function() {
  const u = '//10.244.231.138/matomo/';
  _paq.push(['setTrackerUrl', u + 'matomo.php']);
  _paq.push(['setSiteId', 'xxxTheSiteId']); // 【要修改】'xxxTheSiteId'为matomo系统中注册的站点id，不能乱写
  var d = document;
  var g = d.createElement('script');
  var s = d.getElementsByTagName('script')[0];
  g.type = 'text/javascript';
  g.async = true;
  g.defer = true;
  g.src = u + 'matomo.js';
  s.parentNode.insertBefore(g, s);
})()

登录登出用户账号配置

JavaScript

// 添加登录后的用户工号到matomo系统中
var _paq = window._paq; 
var currentUrl = location.href;
_paq.push(['setCustomUrl', currentUrl]);
_paq.push(['setUserId', xxxTheUserId]); // 【要修改】xxxTheUserId是从后端获取的登录账号id（一般为用户工号）
_paq.push(['trackPageView']);
_paq.push(['enableLinkTracking']);

// 退出登录后在matomo系统中重置用户id
var _paq = window._paq; 
_paq.push(['resetUserId']);
_paq.push(['appendToTrackingUrl', 'new_visit=1']); 
_paq.push(['trackPageView']);
_paq.push(['appendToTrackingUrl', '']);

特定路由配置

JavaScript

export default {
  mounted() {
    //var currentUrl = location.href;
    var _paq = window._paq; 
    var currentUrl = location.href;
    _paq.push(['setCustomUrl', currentUrl]);
    _paq.push(['setCustomVariable', 1, 'PageName', 'XXX页面名称', 'page']); // 【要修改】XXX页面名称为需要制定统计的页面名称或模块名称，不能乱写，不然统计数据会出问题   
    _paq.push(['trackPageView']);
  }
}

系统列表

1.MacI新產品開發系統

系统详情

名称：MacI新產品開發系統
网址: http://10.244.231.103/ePDMWeb

关键变量值

siteId = 1

1	_paq.push(['setSiteId', '1']);

系统开发者注意事项

根据前端项目类型进行相应配置
通用配置中要特别注意要将 _paq.push([‘setSiteId’, ‘xxxTheSiteId’]);中的xxxTheSiteId改为 关键变量值中的相应id

2.金流系統

系统详情

名称：金流系統
网址: http://10.244.168.180/MCEBGCashFlow

关键变量值

siteId = 2

1	_paq.push(['setSiteId', '2']);

系统开发者注意事项

根据前端项目类型进行相应配置
通用配置中要特别注意要将 _paq.push([‘setSiteId’, ‘xxxTheSiteId’]);中的xxxTheSiteId改为 关键变量值中的相应id

通用配置

传统web项目配置
单页应用SPA项目配置

3.Smart Tools

系统详情

名称：Smart Tools
网址: http://10.244.168.180/tools/

关键变量值

siteId = 3

1	_paq.push(['setSiteId', '3']);

系统开发者注意事项

根据前端项目类型进行相应配置
通用配置中要特别注意要将 _paq.push([‘setSiteId’, ‘xxxTheSiteId’]);中的xxxTheSiteId改为 关键变量值中的相应id

通用配置

传统web项目配置
单页应用SPA项目配置

4.模治檢具訂單信息服務平台

系统详情

名称：模治檢具訂單信息服務平台
网址: http://metalworking.efoxconn.com/bid

关键变量值

siteId = 4

1	_paq.push(['setSiteId', '4']);

系统开发者注意事项

根据前端项目类型进行相应配置
通用配置中要特别注意要将 _paq.push([‘setSiteId’, ‘xxxTheSiteId’]);中的xxxTheSiteId改为 关键变量值中的相应id

通用配置

传统web项目配置
单页应用SPA项目配置

5.膠水倉庫管理（GLUE）

系统详情

名称：膠水倉庫管理（GLUE）
网址: http://10.244.168.180/glue

关键变量值

siteId = 5

1	_paq.push(['setSiteId', '5']);

系统开发者注意事项

根据前端项目类型进行相应配置
通用配置中要特别注意要将 _paq.push([‘setSiteId’, ‘xxxTheSiteId’]);中的xxxTheSiteId改为 关键变量值中的相应id

通用配置

传统web项目配置
单页应用SPA项目配置

6.Kappa考試系統

系统详情

名称：Kappa考試系統
网址: http://10.244.168.180/kappa

关键变量值

siteId = 6

1	_paq.push(['setSiteId', '6']);

系统开发者注意事项

根据前端项目类型进行相应配置
通用配置中要特别注意要将 _paq.push([‘setSiteId’, ‘xxxTheSiteId’]);中的xxxTheSiteId改为 关键变量值中的相应id

通用配置

传统web项目配置
单页应用SPA项目配置

7.IAM權限管理系統

系统详情

名称：IAM權限管理系統
网址: http://10.244.168.180/iam

关键变量值

siteId = 7

1	_paq.push(['setSiteId', '7']);

系统开发者注意事项

根据前端项目类型进行相应配置
通用配置中要特别注意要将 _paq.push([‘setSiteId’, ‘xxxTheSiteId’]);中的xxxTheSiteId改为 关键变量值中的相应id

通用配置

传统web项目配置
单页应用SPA项目配置

8.签字系统

系统详情

名称：签字系统
网址: http://chrm.foxconn.com/question/signature

关键变量值

siteId = 8

1	_paq.push(['setSiteId', '8']);

系统开发者注意事项

根据前端项目类型进行相应配置
通用配置中要特别注意要将 _paq.push([‘setSiteId’, ‘xxxTheSiteId’]);中的xxxTheSiteId改为 关键变量值中的相应id

通用配置

传统web项目配置
单页应用SPA项目配置

9.品質數據採集系統

系统详情

名称：品質數據採集系統
网址: http://10.244.168.180/mactrac

关键变量值

siteId = 8

1	_paq.push(['setSiteId', '8']);

系统开发者注意事项

根据前端项目类型进行相应配置
通用配置中要特别注意要将 _paq.push([‘setSiteId’, ‘xxxTheSiteId’]);中的xxxTheSiteId改为 关键变量值中的相应id

通用配置

传统web项目配置
单页应用SPA项目配置

10.品質管理系統(新版)

系统详情

名称：品質管理系統(新版)
网址: http://10.244.168.180/foxqis

关键变量值

siteId = 10

1	_paq.push(['setSiteId', '10']);

系统开发者注意事项

根据前端项目类型进行相应配置
通用配置中要特别注意要将 _paq.push([‘setSiteId’, ‘xxxTheSiteId’]);中的xxxTheSiteId改为 关键变量值中的相应id

通用配置

传统web项目配置
单页应用SPA项目配置

11.崗位點名系統

系统详情

名称：崗位點名系統
网址: http://10.244.168.180/humattend

关键变量值

siteId = 11

1	_paq.push(['setSiteId', '11']);

系统开发者注意事项

根据前端项目类型进行相应配置
通用配置中要特别注意要将 _paq.push([‘setSiteId’, ‘xxxTheSiteId’]);中的xxxTheSiteId改为 关键变量值中的相应id

通用配置

传统web项目配置
单页应用SPA项目配置

12.品質管理系統(舊版)

系统详情

名称：品質管理系統(舊版)
网址: http://10.244.168.180/macqis

关键变量值

siteId = 12

1	_paq.push(['setSiteId', '12']);

系统开发者注意事项

根据前端项目类型进行相应配置
通用配置中要特别注意要将 _paq.push([‘setSiteId’, ‘xxxTheSiteId’]);中的xxxTheSiteId改为 关键变量值中的相应id

通用配置

传统web项目配置
单页应用SPA项目配置

13.富士康智能雲網製造平臺

系统详情

名称：富士康智能雲網製造平臺
网址: http://10.244.233.80:8098

关键变量值

siteId = 13

1	_paq.push(['setSiteId', '13']);

系统开发者注意事项

根据前端项目类型进行相应配置
通用配置中要特别注意要将 _paq.push([‘setSiteId’, ‘xxxTheSiteId’]);中的xxxTheSiteId改为 关键变量值中的相应id

通用配置

传统web项目配置
单页应用SPA项目配置

14.深圳QIS系統老版

系统详情

名称：深圳QIS系統老版
网址: http://10.197.10.116/com/foxconn/sidc/sipd/sfc/sct/aspx/Login.aspx

关键变量值

siteId = 14

1	_paq.push(['setSiteId', '14']);

系统开发者注意事项

根据前端项目类型进行相应配置
通用配置中要特别注意要将 _paq.push([‘setSiteId’, ‘xxxTheSiteId’]);中的xxxTheSiteId改为 关键变量值中的相应id

通用配置

传统web项目配置
单页应用SPA项目配置

15.成都QIS系統老版

系统详情

名称：成都QIS系統老版
网址: http://10.244.237.244/com/foxconn/sidc/sipd/sfc/sct/aspx/Login.aspx

关键变量值

siteId = 15

1	_paq.push(['setSiteId', '15']);

系统开发者注意事项

根据前端项目类型进行相应配置
通用配置中要特别注意要将 _paq.push([‘setSiteId’, ‘xxxTheSiteId’]);中的xxxTheSiteId改为 关键变量值中的相应id

通用配置

传统web项目配置
单页应用SPA项目配置

16.戰情可視化平臺

系统详情

名称：戰情可視化平臺
网址: http://10.151.138.76

关键变量值

siteId = 16

1	_paq.push(['setSiteId', '16']);

系统开发者注意事项

根据前端项目类型进行相应配置
通用配置中要特别注意要将 _paq.push([‘setSiteId’, ‘xxxTheSiteId’]);中的xxxTheSiteId改为 关键变量值中的相应id

通用配置

传统web项目配置
单页应用SPA项目配置

17.中控系統

系统详情

名称：中控系統
网址: http://10.151.138.76:8080

关键变量值

siteId = 17

1	_paq.push(['setSiteId', '17']);

系统开发者注意事项

根据前端项目类型进行相应配置
通用配置中要特别注意要将 _paq.push([‘setSiteId’, ‘xxxTheSiteId’]);中的xxxTheSiteId改为 关键变量值中的相应id

通用配置

传统web项目配置
单页应用SPA项目配置

18.供應鏈戰情中心

系统详情

名称：供應鏈戰情中心
网址: http://10.151.138.76:8877

关键变量值

siteId = 18

1	_paq.push(['setSiteId', '18']);

系统开发者注意事项

根据前端项目类型进行相应配置
通用配置中要特别注意要将 _paq.push([‘setSiteId’, ‘xxxTheSiteId’]);中的xxxTheSiteId改为 关键变量值中的相应id

通用配置

传统web项目配置
单页应用SPA项目配置

19.數字車間

系统详情

名称：數字車間
网址: http://10.151.138.76:8086

关键变量值

siteId = 19

1	_paq.push(['setSiteId', '19']);

系统开发者注意事项

根据前端项目类型进行相应配置
通用配置中要特别注意要将 _paq.push([‘setSiteId’, ‘xxxTheSiteId’]);中的xxxTheSiteId改为 关键变量值中的相应id

通用配置

传统web项目配置
单页应用SPA项目配置

20.環安平臺

系统详情

名称：環安平臺
网址: http://10.151.138.76

关键变量值

siteId = 20

1	_paq.push(['setSiteId', '20']);

系统开发者注意事项

根据前端项目类型进行相应配置
通用配置中要特别注意要将 _paq.push([‘setSiteId’, ‘xxxTheSiteId’]);中的xxxTheSiteId改为 关键变量值中的相应id

通用配置

传统web项目配置
单页应用SPA项目配置

21.噴砂看板

系统详情

名称：噴砂看板
网址: http://10.151.138.76

关键变量值

siteId = 21

1	_paq.push(['setSiteId', '21']);

系统开发者注意事项

根据前端项目类型进行相应配置
通用配置中要特别注意要将 _paq.push([‘setSiteId’, ‘xxxTheSiteId’]);中的xxxTheSiteId改为 关键变量值中的相应id

通用配置

传统web项目配置
单页应用SPA项目配置

22.專案全局智能平臺

系统详情

名称：專案全局智能平臺
网址: http://10.151.138.76:8090

关键变量值

siteId = 22

1	_paq.push(['setSiteId', '22']);

系统开发者注意事项

根据前端项目类型进行相应配置
通用配置中要特别注意要将 _paq.push([‘setSiteId’, ‘xxxTheSiteId’]);中的xxxTheSiteId改为 关键变量值中的相应id

通用配置

传统web项目配置
单页应用SPA项目配置

23.倉儲物流可視化平臺

系统详情

名称：倉儲物流可視化平臺
网址: http://10.151.138.76:8056

关键变量值

siteId = 23

1	_paq.push(['setSiteId', '23']);

系统开发者注意事项

根据前端项目类型进行相应配置
通用配置中要特别注意要将 _paq.push([‘setSiteId’, ‘xxxTheSiteId’]);中的xxxTheSiteId改为 关键变量值中的相应id

通用配置

传统web项目配置
单页应用SPA项目配置

24.Mac(I)Trace系統

系统详情

名称：Mac(I)Trace系統
网址: http://10.144.128.57

关键变量值

siteId = 24

1	_paq.push(['setSiteId', '24']);

系统开发者注意事项

根据前端项目类型进行相应配置
通用配置中要特别注意要将 _paq.push([‘setSiteId’, ‘xxxTheSiteId’]);中的xxxTheSiteId改为 关键变量值中的相应id

通用配置

传统web项目配置
单页应用SPA项目配置

25.KM系統

系统详情

名称：KM系統
网址: http://10.144.128.62/km

关键变量值

siteId = 25

1	_paq.push(['setSiteId', '25']);

系统开发者注意事项

根据前端项目类型进行相应配置
通用配置中要特别注意要将 _paq.push([‘setSiteId’, ‘xxxTheSiteId’]);中的xxxTheSiteId改为 关键变量值中的相应id

通用配置

传统web项目配置
单页应用SPA项目配置

26.PDCS系統

系统详情

名称：PDCS系統
网址: http://10.144.128.67/pdcs

关键变量值

siteId = 26

1	_paq.push(['setSiteId', '26']);

系统开发者注意事项

根据前端项目类型进行相应配置
通用配置中要特别注意要将 _paq.push([‘setSiteId’, ‘xxxTheSiteId’]);中的xxxTheSiteId改为 关键变量值中的相应id

通用配置

传统web项目配置
单页应用SPA项目配置

27.OA辦公自動化系統

系统详情

名称：OA辦公自動化系統
网址: http://10.144.128.61/mac-oa/index.aspx

关键变量值

siteId = 27

1	_paq.push(['setSiteId', '27']);

系统开发者注意事项

根据前端项目类型进行相应配置
通用配置中要特别注意要将 _paq.push([‘setSiteId’, ‘xxxTheSiteId’]);中的xxxTheSiteId改为 关键变量值中的相应id

通用配置

传统web项目配置
单页应用SPA项目配置

28.檔案共享平臺

系统详情

名称：檔案共享平臺
网址: http://10.151.138.76:8080

关键变量值

siteId = 28

1	_paq.push(['setSiteId', '28']);

系统开发者注意事项

根据前端项目类型进行相应配置
通用配置中要特别注意要将 _paq.push([‘setSiteId’, ‘xxxTheSiteId’]);中的xxxTheSiteId改为 关键变量值中的相应id

通用配置

传统web项目配置
单页应用SPA项目配置

30.戰情系統移動端

系统详情

名称：戰情系統移動端
网址: http://10.244.168.180/warcenter

关键变量值

siteId = 30

1	_paq.push(['setSiteId', '30']);

系统开发者注意事项

根据前端项目类型进行相应配置
通用配置中要特别注意要将 _paq.push([‘setSiteId’, ‘xxxTheSiteId’]);中的xxxTheSiteId改为 关键变量值中的相应id

通用配置

传统web项目配置
单页应用SPA项目配置

31.Self Audit

系统详情

名称：Self Audit
网址: http://10.244.168.180/selfaudit/plan.html

关键变量值

siteId = 31

1	_paq.push(['setSiteId', '31']);

系统开发者注意事项

根据前端项目类型进行相应配置
通用配置中要特别注意要将 _paq.push([‘setSiteId’, ‘xxxTheSiteId’]);中的xxxTheSiteId改为 关键变量值中的相应id

通用配置

传统web项目配置
单页应用SPA项目配置

32.智能倉儲管理系統

系统详情

名称：智能倉儲管理系統
网址: http://10.244.168.180/agvstorage

关键变量值

siteId = 32

1	_paq.push(['setSiteId', '32']);

系统开发者注意事项

根据前端项目类型进行相应配置
通用配置中要特别注意要将 _paq.push([‘setSiteId’, ‘xxxTheSiteId’]);中的xxxTheSiteId改为 关键变量值中的相应id

通用配置

传统web项目配置
单页应用SPA项目配置

33.高速物流鏈軌監控看板

系统详情

名称：高速物流鏈軌監控看板
网址: http://10.244.168.180/bracket

关键变量值

siteId = 33

1	_paq.push(['setSiteId', '33']);

系统开发者注意事项

根据前端项目类型进行相应配置
通用配置中要特别注意要将 _paq.push([‘setSiteId’, ‘xxxTheSiteId’]);中的xxxTheSiteId改为 关键变量值中的相应id

通用配置

传统web项目配置
单页应用SPA项目配置

34.電批全檢系統

系统详情

名称：電批全檢系統
网址: http://10.244.168.180/torquecheck

关键变量值

siteId = 34

1	_paq.push(['setSiteId', '34']);

系统开发者注意事项

根据前端项目类型进行相应配置
通用配置中要特别注意要将 _paq.push([‘setSiteId’, ‘xxxTheSiteId’]);中的xxxTheSiteId改为 关键变量值中的相应id

通用配置

传统web项目配置
单页应用SPA项目配置

35.mold門戶

系统详情

名称：mold門戶
网址: http://10.244.231.135:8080/mold

关键变量值

siteId = 35

1	_paq.push(['setSiteId', '35']);

系统开发者注意事项

根据前端项目类型进行相应配置
通用配置中要特别注意要将 _paq.push([‘setSiteId’, ‘xxxTheSiteId’]);中的xxxTheSiteId改为 关键变量值中的相应id

通用配置

传统web项目配置
单页应用SPA项目配置

本文标题：门户系统中系统统计Matomo配置
本文作者：Xplorist
创建时间：2020-12-18 15:41:00
本文链接：https://xplorist.tech/2020/12/18/c41131450eb0/
版权声明：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！

#Matomo

$tools-item-width = 2.2rem $tools-item-font-size = 1.1rem $tools-item-border-radius = 0.1rem .side-tools-container { position relative .tools-item { width $tools-item-width height $tools-item-width margin-bottom 0.2rem color var(--default-text-color) font-size $tools-item-font-size background var(--background-color) border-right none border-radius $tools-item-border-radius box-shadow 0.1rem 0.1rem 0.2rem var(--shadow-color) cursor pointer i { color var(--default-text-color) } &:hover { color var(--background-color) background var(--primary-color) box-shadow 0.2rem 0.2rem 0.4rem var(--shadow-color) i { color var(--background-color) } } +keep-tablet() { width $tools-item-width * 0.9 height $tools-item-width * 0.9 margin-bottom 0.2rem font-size $tools-item-font-size * 0.9 } &.rss { a { width 100% height 100% border-radius $tools-item-border-radius &:hover { color var(--background-color) background var(--primary-color) box-shadow 0.2rem 0.2rem 0.4rem var(--shadow-color) } } } } .side-tools-list { transform translateX(100%) opacity 0 transition-t("transform, opacity", "0, 0", "0.2, 0.2", "linear, linear") .tool-expand-width { +keep-tablet() { display none } } &.show { transform translateX(0) opacity 1 } } .exposed-tools-list { if (hexo-config('style.scroll.percent.enable') == true) { .tool-scroll-to-top { display none &.show { display flex } &:hover { .percent { display none } .arrow-up { display flex } } .arrow-up { display none } .percent { display flex font-size 1rem } } } } }