主题是一种特殊的插件用来改变 piwik 的外观,使用 CSS 和 LESS 来覆盖Piwik 默认的样式。
这篇文章会介绍如何创建一个新主题,你需要具备的知识:
- 能够编写 HTML, PHP,CSS 和 JavaScript
- 大概了解如何扩展 Piwik
1. 新建一个主题
在 Piwik的根目录执行以下命令来创建一个新主题:
./console generate:theme
在填入一些相关信息后,在 plugins
目录下会生成一个新的目录就是我们的主题目录。
2. 简单的主题
piwik 用 LESS 来组织 CSS 文件。
2.1 颜色和字体
颜色非常容易修改,因为它们都被定义在 Less 变量中。
例如 :要将页面背景颜色从白改成黑,只需要修改如下变量:
@theme-color-background-base: #000;
将链接颜色修改为红色:
@theme-color-link: #f00;
改变字体:
@theme-fontFamily-base: Verdana, sans-serif;
所有你可以覆盖的变量都列出在 Morpheus 插件中:
你还可以直接修改一个特定的 HTML 元素的样式(不推荐这么做),例如 :
#login {
background-color: red;
}
2.2 自定义图标
自定义图标非常简单: 在你的主题目录下新建一个 images
目录,然后在里面放和你想要覆盖的图标相同文件名的图标文件即可。
所有你可以直接覆盖的图标列表,可以查看 Morpheus 主题,
目前还不能通过覆盖修改数据报表中的图标,例如浏览器的图标、搜索引擎的图标。
2.4 修改Logo 和 favicon
Piwik 用户可以直接在后台上传自己的 Logo 和 favicon ,
打开“管理-> 通用设置->图标设置”
3. 高级主题设置
3.1 添加样式
每个主题都有一个主要文件列出了用于样式覆盖的样式文件,打开plugin.json
文件在 stylesheet
字段上可以看到这个文件的路径,
这个文件的路径是相对于当前主题的根目录的。
{
"name": "MyTheme",
"description": "A new theme.",
"theme": true,
"stylesheet": "stylesheets/theme.less"
}
在生成主题时,会生成一个样式文件 theme.less
,位于 stylesheets
目录。
你可以将你的所有的样式都放到这个文件里,但是为了便于管理和维护样式,你可以将样式分类放到多个文件中,然后在 theme.less
文件中通过 @import
来引入他们。
3.2 添加 JavaScript 文件
主题还可以添加新的 JavaScript 文件, 这些 Js 文件可以用来修改哪些通过 CSS 和 LESS 无法修改的样式
在 pulgin.json
文件中,修改 javascript
字段来添加 Javascript 文件
{
"name": "MyTheme",
"description": "A new theme.",
"theme": true,
"stylesheet": "stylesheets/theme.less",
"javascript": ["javascripts/myJavaScriptFile.js", "javascripts/myOtherJavaScriptFile.js"]
}
3.3 Javascript 和 PHP 中修改颜色
有些颜色是在 JavaScript 和 PHP 中定义的,在自定义主题中你仍然可以通过 CSS 来修改,只不过跟前面提到的修改 HTML 的颜色有些不同。
Javascript 中定义的颜色有一个名称,并且被放到了一个颜色命名空间下,你可以按如下格式设置颜色:
.color-namespace-name[data-name=color-name] {
color: red;
}
例如:
.bar-graph-colors[data-name=grid-background] {
color: @background-color-base;
}
.bar-graph-colors[data-name=grid-border] {
color: @basic-grid-border-color;
}
3.3.1 被命名的颜色
下面是Piwik 中所有的被命名的颜色:
- sparkline-colors 开头的: 控制折线图的颜色
- backgroundColor : sparkline 图片的背景颜色
- lineColor : sparkline 中线条的颜色
- minPointColor: 数据结果中最小值点的颜色
- lastPointColor: 数据结果中最后一个值的颜色
- maxPointColor: 数据结果中最大值点的颜色
- bar-graph-colors 开头的: 控制柱形图的颜色
- grid-background: 图表的背景色
- series1: 第一组数据柱形的颜色
- ….
- series10: 第十组数据柱形的颜色
- ticks:X 轴的 gridlines 和 ticks 的颜色
- single-metric-label
- pie-graph-colors 开头的: 控制饼图相关的颜色
- …
- evolution-graph-colors 开头的:控制演进图(evolution graph)相关的颜色
- …
- realtime-map 开头的: 控制实施访客地图的相关颜色
- …
- visitor-map 开头的: 控制访客地图的相关颜色
- …
4. Twig 模板引擎
Piwik 使用 Twig templating engine 模板引擎来 生成 HTML 页面。
制作主题一般不用改模板,只需要用 LESS 、CSS 和 PHP 就行了。
在少数需要高级定制的情况下你需要用到 Twig 模板
参照 Morpheus
插件 templates
目录下的 twig 模板文件,在你的主题目录的 templates
目录下创建相同文件名的模板来覆盖默认的模板:
plugins/[MyThemePlugin]/templates/dashboard.twig
覆盖插件中的模板,如下:
plugins/[MyThemePlugin]/templates/plugins/[OverriddenPlugin]/[overriddenTemplate].twig
翻译至:https://developer.piwik.org/guides/theming
转载请注明:大后端 » Piwik 自定义主题