xObserve

  1. 入门教程
  2. 打造更好看的首页

截至目前,一切都还不错,但是如果你在使用夜晚模式浏览,你可能会觉得背景色有一点单调。

修改仪表盘背景

  1. 访问首页 ( /home url ), 点击仪表盘右上角的设置按钮
  2. 选择 Styles 子标签
  3. 背景图片选择 Dark Rainbow
  4. 背景颜色 设置为 rgb(15,23,42)
  5. 勾选启用背景

然后关闭设置回到仪表盘页面,你会发现现在的背景色更加通透好看了点

pretty-dashboard

保存设置

别急着离开当前页面,因为还没有对修改进行保存。

保存仪表盘

  1. 在仪表盘页面点击右上角的保存图表中或者按下 Ctrl+S 打开保存面板
  2. 点击 查看修改内容 可以看到当前修改的内容(相比上一次保存),让我们继续回到保存面板
  3. 修改内容 中输入一条描述信息,例如: 更新仪表盘的背景样式
  4. 点击 提交 按钮即可完成保存

很好,截至目前,我们修改了背景样式,并且保存到数据库,对了,还给予了修改描述,这样在未来可以清晰的看到当前这次保存修改了什么内容。

查看历史

有时,我们希望能查看国外的修改历史列表,并且回退到某个版本。

  1. 点击右上角的保存按钮
  2. 选择 查看保存历史 菜单项
  3. 在弹出的面板中,你可以看到过去 50 条历史保存记录
  4. 点击 预览 按钮可以预览选择的历史版本
  5. 如果想要回退版本到选择的 预览 版本,只要再一次保存即可。
dashboard-history

切换语言和主题

xObserve 默认的语言是英文,默认的主题是夜晚,你可以自行修改:

  1. 点击左侧导航栏下方的用户图标
  2. 点击语言或主题所在的行进行更改
select-theme

背景图片的问题

在之前的设置中,背景图片确实生效了,但是它也有问题:如果你切换主题到白天,你会发现主题变得很奇怪,字体颜色甚至都快看不见了。

原因在于,在 xObserve 中,仪表盘的背景图片都有指定的主题,你应该去使用相应的主题,当然 xObserve 也很贴心,会在你进入该仪表盘时,自动帮你切换到相应的主题。你可以在 仪表盘设置 -> 样式 -> 背景主题 中查看当前背景图片对应的默认主题设置。

为欢迎图表添加标题

可以看到,仪表盘中目前唯一的图表是没有任何标题的,我们来添加一个:Hello。

没有标题的原因其实很简单:标题是空的,那么问题来了,该如何修改呢?如果有标题,你很轻易的就能点击标题区域弹出面板,但是没有标题呢?

panel-header

如图所示,点击图表顶部的中间区域即可:将鼠标悬浮在图表顶部的中间区域,你会发现鼠标变成了可点击的光标提示。

  1. 点击 编辑 打开图表编辑面板
  2. 喔,一个复杂的面板被打开了,不过别担心,在未来的章节我们会逐步了解到它们该如何使用
  3. 找到右边区域的 图表 子标签
  4. 点击 基本设置 展开相应的区域
  5. 图表标题 中输入 Hello, 此时你应该能看到左侧图表的标题已经发生了改变
  6. 点击右上角的 应用 按钮,应用修改内容并回到仪表盘页面

此时,我们已经成功看到世界跟我们打的招呼,但是。。好像没那么好看,样式有些奇怪。

修改图表标题的位置

目前,Hello 标题和图表的边框重叠在一起,我们得将标题往上移动点。

  1. 打开图表编辑面板,在右边区域选择 Styles 子标签
  2. 图表边框 中可以修改边框的样式,但是现在先别管
  3. 找到 标题样式, 修改 padding bottom35px

点击 应用 回到仪表盘页面,最最重要的:别忘了保存! 此时可以看到,标题往上移动了少许,不再与边框发生重叠。