Skip to end of metadata
Go to start of metadata

中文标题【使用 CSS 样式化 Confluence】

这个页面对 Confluence 通过修改 CSS 来改变外观和感觉的情况进行了说明。

介绍

层叠样式表(Cascading Style Sheets (CSS))是对 Web 页面进行样式化的工业化标准。网页中的内容将会被转换为 HTML 语言,有关页面的显示,外观等就需要通过 CSS 文件来进行定义了。你可以上传一个 CSS 的文本文件,或者你可以直接输入 stylesheet 后将样式表应用到一个空间或者整个的 Confluence 站点。

 


说明: 在默认情况下,只有系统管理才可以编辑针对整个 Confluence 站点的 CSS 样式表。希望允许任何具有空间管理员权限的用编辑空间的 CSS 样式表,进入 > 基本配置(General Configuration) > 安全配置(Security Configuration)然后选择 为空间自定义样式表(Custom Stylesheets for Spaces)


创建一个 CSS 文件,并且能够让这个 CSS 文件无偏差的应用到不同的浏览器中是一个网站设计的基本工作也是一个精细的工作。对 CSS 修改后的 Confluence 站点进行具体的测试确定所有页面都能够正常的显示是一个非常重要的工作 —— 例如,修改的 CSS 能够让 Confluence 的主面板显示正常,同时也能够让所有基本页面也能正常显示。

为了帮助你进行这方面的修改,我们创建了这个帮助页面:basic styling tutorial 来让你对 CSS 有一些基本的了解。


本页中的内容:

相关页面

考虑使用自定义 CSS

CSS 的知识储备

如果你没有有关 CSS 的相关知识,请参考页面  CSS Resources section 中的内容。当你打算开始对 Confluence 的样式表进行修改之前,你应该对 CSS 有一些相关的了解和知识储备。

安全

自定义 CSS 有可能被在页面中注入脚本,有跨站点攻击的风险 cross-site scripting (XSS) 。当自定义脚本上传功能被启用后,空间管理员可以用自己的用户名和密码上传 CSS 样式表,然后触发浏览器在页面载入的时候运行脚本,这些脚本可能连空间管理员自己都不知道,甚至更加恶劣的能够获得管理员权限。正是基于这个考虑,这个功能在默认情况下是禁用的。Confluence 的管理员应该只启用他们熟悉的 CSS 文件,尽量避免使用来历不明的 CSS 文件来避免安全上的风险。

缩放

每个页面都需要进行缩放。基于每个用户使用的浏览器的不同,页面的内容应该能够基于不同的浏览器进行正确的缩放。你设计的 CSS 应该能够考虑到这种情况。尝试对 Confluence 的页面进行一些缩放的测试,这个测试需要对空间的很多页面进行测试,例如草稿箱,标签,页面继承等。你设计的样式表应该在任何情况下都能正常的工作,而不仅仅是第一页能正常工作就可以了。

不能禁用的特性

关闭一些链接,头,甚至是整个菜单是非常容易的,你只需要设置样式表为 'hidden' 就可以了。这个可能对对 Wiki 并不是很属性的用户能起到一些帮助。简单的 UI 设计能够更好的帮助用户进行使用。请注意,你隐藏的这些链接并不代表系统中的这些功能就不存在了。用户还可以通过修改自己浏览器的样式表来将这些功能重新使用或者获得访问使用的 URL。不要期待使用 CSS 能够帮你禁用 Confluence 的一些功能。

不应该被禁用的特性

对 Confluence 的用户希望相关的操作也能够同时在同样的地方显示出来。删除 Confluence 页面中的按钮或者隐藏这些按钮将会阻碍用户对 Confluence 的访问和使用,这些用户可能通过一些特定的 URL 来绕过你对按钮的禁用。

自定义 CSS 不能应用的管理员界面

你站点任何自定义 CSS 的使用将不会影响到系统管理员控制台。这样设置的意图是不能通过自定义 CSS 来阻止用户方法 Confluence 控制台的功能。

Confluence 版本兼容性

当你打算对你 Confluence 进行升级的时候,你需要小心。后续 Confluence 的版本可能对你当前使用的自定义 CSS 并不兼容——这个可能会导致你的 CSS 损坏,这个将会要求你在升级 Confluence 后可能对你的自定义 CSS 文件进行维护。请询问你的 Confluence 管理员获得更多信息。

在不同浏览器中测试

你应该对你的修改 CSS 后的 Confluence 站点在不同的浏览器中进行测试。Internet Explorer, Chrome, Firefox,Opera 和 Safari (Mac OS X) 是绝大部分用户使用的浏览器


不支持 CSS 自定义

创建自定义的 CSS 可能会导致各种潜在的可能性,Atlassian 将不会对自定义 CSS 产生或相关的问题提供支持。

开始编辑

编辑 CSS


希望编辑空间的 CSS 样式表:

  1. 进入空间后,然后从边栏的底部选择 空间工具(Space tools) > 外观和感觉(Look and Feel)
  2. 然后选择 样式表(Stylesheet后选择 编辑(Edit)
  3. 将你的自定义 CSS 复制粘贴到文本输入框中。
  4. 保存你的修改。新的 CSS 效果将会应用到这个空间的所有内容页面中。



参考相关指南

请参考 Basic Styling Tutorial 中的一些例子开始对你的 CSS 进行自定义。

CSS 资源


  • No labels