编写主题

主题是特殊类型的插件,可以改变Matomo(以前是Piwik) UI的外观和感觉。他们使用CSS和LESS来覆盖其他Matomo插件定义的默认样式。

本指南将解释如何创建一个新主题。本指南假设您:

  • 可以在HTML, PHP, CSS和JavaScript编码,
  • 并对扩展Matomo有一个大致的了解(如果没有,请阅读我们的开始指南)。

创建一个新主题

要创建一个空主题,在Matomo的根目录下运行以下命令:

。/控制台生成:主题

输入适当的信息后,将在插件/目录中。现在你需要激活这个主题,点击“Administration => Plugins => Manage Themes”,激活你创建的主题。

简单的主题

颜色和字体

CSS中使用的颜色很容易覆盖,因为它们被定义为变量。这些变量是在PHP中定义的,因为我们还需要将它们应用于电子邮件、PDF报告、导出的图像等。

例如,要将背景从白色改为黑色,您可以简单地更改您的YourPluginName.php美元文件。

公共函数configureThemeVariables(插件\ThemeStyles $vars) {$vars->colorBackgroundBase = '#000';}

要将链接颜色更改为红色,请重写link变量:

公共函数configureThemeVariables(插件\ThemeStyles $vars) {$vars->colorLink = '#f00';}

要更改字体,请重写字体变量:

公共函数configureThemeVariables(插件\ThemeStyles $vars) {$vars->fontFamilyBase = 'Verdana, sans-serif';}

你懂的。你可以覆盖所有变量的列表是在Morpheus插件中定义的:

虽然我们不建议这样做,你可以直接改变特定元素的颜色,例如:

#登录{background-color:红色;}

请仅在必要时使用此方法。元素id或类将来可能会改变并破坏您的主题。

图标覆盖

重写图标非常简单:创建一个名为图片在主题的目录中,放置一个与要覆盖的图标具有相同文件名的图标。

可以覆盖的图标的完整列表,请看睡眠主题.目前还不可能覆盖报告中使用的图标,如浏览器或搜索引擎图标,但如果您有建议,可以这样做在piwik-icon存储库中打开一个问题

标志和图标

由于Matomo用户可以使用管理界面上传自己的徽标和图标,主题不应该改变任何这些。

先进的主题

添加样式

每个主题都有一个主文件,其中包含主题的所有样式覆盖。文件的位置由样式表属性plugin.json文件。该属性的值是一个相对于插件根目录的路径:

{"name": "MyTheme", "description": "A new theme.", "theme": true, "stylesheet": "stylesheets/theme. "那么“}

生成的主题已经配置了一个文件,因此不需要设置此属性。这个文件叫做theme.less并且位于样式表/你的主题目录。

如果愿意,您可以将整个主题放到这个文件中,但结果可能不容易阅读和维护。相反,您应该根据它们修改的Matomo部分对样式进行分组,并将它们放在单独的LESS文件中。然后你就可以@ import他们在theme.less

添加JavaScript文件

主题还可以添加新的JavaScript文件。这些文件可以用来设置CSS或LESS无法设置的样式。

要添加JavaScript文件,请将它们作为数组添加到javascript属性plugin.json文件:

{"name": "MyTheme", "description": "A new theme.", "theme": true, "stylesheet": "stylesheets/theme. "less", "javascript": ["javascripts/myJavaScriptFile.js", "javascripts/myOtherJavaScriptFile.js"]}

JavaScript和PHP中使用的主题颜色

有些颜色只在JavaScript和PHP中使用。我们已经可以通过CSS来指定这些颜色,但是这个过程与设置普通HTML元素的颜色有点不同。

JavaScript中使用的每种颜色都有一个名称,并分组在一个颜色名称空间.你可以像这样设置这些颜色:

.color- namspace -name[data-name=color-name]{颜色:红色;}

例如,

.bar-graph-colors[data-name=grid-background] {color: @background-color-base;} .bar-graph-colors[data-name=grid-border] {color: @basic-grid-border-color;}

指定颜色

以下是Matomo所有命名颜色的列表:

  • 名称空间sparkline-colors:包含火花线图像的颜色。

    • 写成backgroundColor:火花线图像的背景色。
    • lineColor:火花线中的线条颜色。
    • minPointColor:标记数据集中观察到的最小值的点的颜色。
    • lastPointColor:标记数据集最后一个值的点的颜色。
    • maxPointColo:标记数据集中观测到的最大值的点的颜色。
  • 名称空间bar-graph-colors:柱状图的颜色报告可视化

    • grid-background:图形的背景色。
    • series1:表示第一组数据的条形的颜色。
    • 台series2:表示第二组数据的条形的颜色。
    • series3:表示第三组数据的条形的颜色。
    • series4:表示第四组数据的柱状图的颜色。
    • series5:表示第五组数据的条形的颜色。
    • series6:表示第六组数据的柱状图的颜色。
    • series7:表示第七组数据的条形的颜色。
    • series8:表示第8组数据的柱状图的颜色。
    • series9:表示第九列数据的柱状图的颜色。
    • series10:表示第十组数据的柱状图的颜色。
    • 蜱虫: x轴网格线和x轴刻度的颜色。
    • single-metric-label:仅为系列名称标签的颜色一个显示“Series”。如果您不关心是否有一个系列显示,请将此颜色设置为您在中使用的颜色series1
  • 名称空间pie-graph-colors:饼图的颜色报告可视化

    • grid-background:图形的背景色。
    • series1:表示显示数据中第一个值的饼图段的颜色。
    • 台series2:表示显示数据中第二个值的饼图段的颜色。
    • series3:表示显示数据中第三个值的饼图段的颜色。
    • series4:表示显示数据中第四个值的饼图段的颜色。
    • series5:表示显示数据中第5个值的饼图段的颜色。
    • series6:表示显示数据中第6个值的饼图段的颜色。
    • series7:表示显示数据中第7个值的饼图段的颜色。
    • series8:表示显示数据中第8个值的饼图段的颜色。
    • series9:表示显示数据中第9个值的饼图段的颜色。
    • series10:表示所显示数据的第十个值的饼图段的颜色。
    • single-metric-label:仅为系列名称标签的颜色一个显示“Series”。如果您不关心是否有一个系列显示,请将此颜色设置为您在中使用的颜色series1
  • 名称空间evolution-graph-colors:包含进化图的颜色报告可视化(显示数据随时间变化的大折线图)。

    • grid-background:图形的背景色。
    • series1:表示显示的第一系列数据的线的颜色。
    • 台series2:表示显示的第二列数据的线的颜色。
    • series3:表示显示的第三组数据的线的颜色。
    • series4:表示显示的第四列数据的线的颜色。
    • series5:表示显示的第五列数据的线的颜色。
    • series6:表示显示的第六个数据系列的线的颜色。
    • series7:表示显示的第七列数据的线的颜色。
    • series8:表示显示的第八列数据的线的颜色。
    • series9:表示显示的第九列数据的线的颜色。
    • series10:表示显示的第十列数据的线的颜色。
    • 蜱虫: x轴网格线和x轴刻度的颜色。
    • single-metric-label:仅为系列名称标签的颜色一个显示“Series”。如果您不关心是否有一个系列显示,请将此颜色设置为您在中使用的颜色series1
  • 名称空间realtime-map的颜色实时访客地图

    • white-bg属性时的地图背景色光的主题
    • white-fill属性时,地图的国家/地区填充颜色光的主题
    • black-bg属性时的地图背景色黑暗的主题
    • black-fill属性时,地图的国家/地区填充颜色黑暗的主题
    • visit-stroke:每次访问的边框颜色。
    • website-referrer-color:访问的填充色,其引用者是一个网站(仅在使用引用类型颜色模式时使用)
    • direct-referrer-color:没有推荐人的访问的填充色(仅在使用引用类型颜色模式时使用)
    • search-referrer-color:访问的填充色,该访问的推荐人是搜索引擎(仅在使用引用类型颜色模式时使用)
    • live-widget-highlight:在活动小部件中突出显示访问时使用的颜色(仅在仪表板中嵌入实时地图和Live小部件时使用)
    • live-widget-unhighlight:在活动小部件中取消高亮显示访问时使用的颜色(仅在仪表板中嵌入实时地图和Live小部件时使用)
    • symbol-animate-fill:开始填充颜色时使用的动画新访问的外观。结尾填充颜色总是访问的正常颜色。
  • 名称空间来宾地图的颜色游客的地图

    • no-data-color:未访问国家的填充色。
    • one-country-color:如果只有一个国家接受访问,则有访问的国家的填充色。
    • color-range-start-choropleth:用于根据访问次数对国家和地区进行着色的颜色范围的开始。
    • color-range-end-choropleth:用于根据访问次数为国家和地区着色的颜色范围的末尾。
    • color-range-start-normal:用于根据访问次数为城市着色的颜色范围的开始。
    • color-range-end-normal:用于根据访问次数为城市着色的颜色范围的末尾。
    • country-highlight-color:当一个国家是突出显示(当鼠标进入一个国家,按下shift键时,该国家会高亮显示)。
    • country-selected-color:当一个国家是选择(即,当一个国家正在使用一行进化弹出)。
    • unknown-region-fill-color:用于没有访问的区域(或显示的任何度量为0)的填充颜色。
    • unknown-region-stroke-color:用于没有访问的区域的笔画颜色(或显示的任何度量为0)。
    • region-stroke-color:访问区域的笔画颜色。
    • region-selected-color:区域为时使用的填充色选择(例如,当一个区域在行演变中被使用时)。
    • region-highlight-color:区域为时使用的填充色突出显示(当鼠标进入一个区域,按下shift键时,该区域会高亮显示)。只有访问过的地区才能被突出显示。
    • invisible-region-background:显示城市时用于区域的填充颜色。这种颜色应该使城市数据更明显。
    • region-layer-stroke-color:每个区域的笔画颜色。
    • city-label-color:城市标签的颜色。
    • city-stroke-color:用于城市的描边颜色。
    • city-highlight-stroke-color:当一个城市是突出显示(当鼠标进入一个城市时,会高亮显示)。
    • city-highlight-fill-color:当一个城市是突出显示然后按下shift键(当鼠标进入某个城市时,会突出显示该城市)。
    • city-highlight-label-color:按下shift键时要使用的标签颜色突出显示
    • city-label-fill-color:城市标签的填充色。
    • city-selected-color:一个城市的填充色选择(例如,当一个城市正在使用一个行进化弹出)。
    • city-selected-label-color:一个城市的标签颜色选择(例如,当一个城市正在使用一个行进化弹出)。
    • special-metrics-color-scale-1:用来给国家和地区上色的颜色刻度的开始特殊的规格[1]
    • special-metrics-color-scale-2:用于给国家和地区上色的色标中的第二种颜色特殊的规格
    • special-metrics-color-scale-3:用于给国家和地区上色的色标中的第三种颜色特殊的规格
    • special-metrics-color-scale-4:用于给国家和地区上色的色标的末尾特殊的规格

[1]使用特殊的规格色标如下:avg_time_on_sitenb_actions_per_visit而且bounce_rate

Twig,模板引擎

Matomo使用树枝模板引擎从PHP创建HTML页面。

在创建主题时,您不需要创建或更改任何模板,因为推荐的方式是只使用Less (CSS)和JavaScript。然而,在一些罕见的情况下,高级定制是必要的,你可能需要定制Twig模板。

请注意,这是不建议的,所以使用风险自负。

从默认值覆盖树枝模板睡眠主题,放置.twig中的同名模板文件模板/目录如下:

插件/ [MyThemePlugin] /模板/ dashboard.twig

要覆盖插件中使用的树枝模板,请放置.twig在你的插件中使用相同名称的模板文件模板/目录如下:

插件/ [MyThemePlugin] /模板/插件/ [OverriddenPlugin] / [overriddenTemplate] .twig

了解更多

  • 学习更多关于创建新报表可视化的信息阅读我们的报表数据可视化指南。
  • 学习更多关于为Matomo插件和主题编写JavaScript的内容阅读我们的使用Matomo的UI指南。
  • 学习更多关于UI组件和样式的信息阅读我们的的观点指南。
Baidu