本文档详细介绍了如何开发一个Confluence插件，以创建自定义主题，改变Confluence的字体和颜色。从创建插件框架开始，逐步讲解如何编写CSS，构建、安装和运行插件，以及如何通过colour-scheme模块扩展主题，实现更多颜色选择。通过这些步骤，最终实现了导航栏背景和边框颜色的修改，并展示了如何在Confluence实例中应用和查看这些更改。
上一节我们介绍了Confluence插件本身的配置文件,这一节我们介绍通过插件创建Confluence自定义主题.在阅读之前,您首先应该对
HTML和
CSS有基本的了解。
这篇文件中出现的代码我已经放到github[1]中,地址在文章的最下方,如果需要可以自行获取。
1.创建插件框架
- 打开终端并导航到之前创建好的工作目录
confluence-plugin-tutorial。 - 运行以下命令创建Confluence插件框架。
atlas-create-confluence-plugin
- 根据提示输入对应的groupId、artifactId、version和package信息,并输入
Y以确认。
Define value for groupId: : com.jenseny.atlassian.tutoria
Define value for artifactId: : theme-tutorial
Define value for version: 1.0.0-SNAPSHOT: :
Define value for package: com.jenseny.atlassian.tutoria: :
Confirm properties configuration:
groupId: com.jenseny.atlassian.tutoria
artifactId: theme-tutorial
version: 1.0.0-SNAPSHOT
package: com.jenseny.atlassian.tutoria
Y: : y
- 把项目导入到IDE中,我这边使用
idea。
2.创建一个简单的主题
生成插件框架时，会自动创建一个CSS目录src/main/resources/css,并在目录中创建一个空的theme-tutorial.css文件。
在此步骤中，需要向该文件添加一些基本的CSS。还将在atlassian-plugin.xml配置文件中声明此CSS资源。
- 因为仅运行时依赖
BasicTheme，所以必须显式导入com.atlassian.confluence.themes包。在pom.xml文件中，将其添加到标签中。
<plugin>
<groupId>com.atlassian.maven.pluginsgroupId>
<artifactId>confluence-maven-pluginartifactId>
<version>${amps.version}version>
<extensions>trueextensions>
<configuration>
<productVersion>${confluence.version}productVersion>
<productDataVersion>${confluence.data.version}productDataVersion>
<enableQuickReload>trueenableQuickReload>
<instructions>
<Atlassian-Plugin-Key>${atlassian.plugin.key}Atlassian-Plugin-Key>
<Export-Package>
com.jenseny.atlassian.tutorial.api,
Export-Package>
<Import-Package>
com.atlassian.confluence.themes,
org.springframework.osgi.*;resolution:="optional",
org.eclipse.gemini.blueprint.*;resolution:="optional",
*
Import-Package>
<Spring-Context>*Spring-Context>
instructions>
configuration>
plugin>
- 在IDE中,导航到
src/main/resources/css/theme-tutorial.css文件。 - 将以下内容添加到
theme-tutorial.css文件中,保存后关闭文件。
#header .aui-header {
background-color: black;
border-color: black;
}
添加的CSS代码的作用就是把Confluence导航的背景和边框颜色改为黑色。
- 在IDE中,导航到
src/main/resources/atlassian-plugin.xml文件。 - 在根节点
之前添加以下内容。
<theme key="simpletheme" name="Simple Theme" class="com.atlassian.confluence.themes.BasicTheme">
<description>A simple custom themedescription>
<param name="includeClassicStyles" value="false"/>
<resource type="download" name="default-theme.css" location="/includes/css/default-theme.css">
<param name="source" value="webContext"/>
resource>
<space-ia value="true"/>
theme>
theme模块使用现有的Confluence类，该类com.atlassian.confluence.themes.BasicTheme指示Confluence从插件加载主题。该模块还包括一个可选的name和description字段，这两个字段都可以在主题管理页面上看到。
因为Confluence编写的大多数主题实际上依赖于Confluence中的默认主题样式表。这包括标准的Confluence字体，颜色和许多其他内容,所以要将Confluence样式包含在主题中，模块需要包含Confluence的默认样式表作为资源。配置includeClassicStyles为false代表禁用Confluence的默认主题，配置space-ia用于启用空间的侧边栏。
- 将之前编写的CSS文件添加到theme标签内。
<resource type="download" name="theme-tutorial.css" location="/css/theme-tutorial.css"/>
- 保存文件,目前配置文件的内容如下。
<atlassian-plugin key="${atlassian.plugin.key}" name="${project.name}" plugins-version="2">
<plugin-info>
<description>${project.description}description>
<version>${project.version}version>
<vendor name="${project.organization.name}" url="${project.organization.url}" />
<param name="plugin-icon">images/pluginIcon.pngparam>
<param name="plugin-logo">images/pluginLogo.pngparam>
plugin-info>
<resource type="i18n" name="i18n" location="theme-tutorial"/>
<web-resource key="theme-tutorial-resources" name="theme-tutorial Web Resources">
<dependency>com.atlassian.auiplugin:ajsdependency>
<resource type="download" name="theme-tutorial.css" location="/css/theme-tutorial.css"/>
<resource type="download" name="theme-tutorial.js" location="/js/theme-tutorial.js"/>
<resource type="download" name="images/" location="/images"/>
<context>theme-tutorialcontext>
web-resource>
<theme key="simpletheme" name="Simple Theme" class="com.atlassian.confluence.themes.BasicTheme">
<description>A simple custom themedescription>
<param name="includeClassicStyles" value="false"/>
<resource type="download" name="default-theme.css" location="/includes/css/default-theme.css">
<param name="source" value="webContext"/>
resource>
<resource type="download" name="theme-tutorial.css" location="/css/theme-tutorial.css"/>
<space-ia value="true"/>
theme>
atlassian-plugin>
3.构建、安装和运行插件
在此步骤中，您将安装插件并运行Confluence,激活简单主题并验证CSS更改。
- 打开终端，然后导航到插件的根文件夹。
cd theme-tutorial/
- 运行以下命令启动Confluence。
atlas-run
此命令将构建插件代码，启动一个Confluence实例，然后安装该插件。这可能需要几分钟的时间。
找到Confluence的URL。默认为
localhost:1990/confluence。在浏览器中输入URL，然后使用admin/admin账号登录。
进入主页面后,点击右上方的配置菜单,选择一般配置进入配置页面。
在左侧菜单中选择主题菜单进入主题管理页面。
选择简单主题单选按钮，然后单击确认按钮。
页面重新加载，没有明显变化,因为我们做的更改不会影响管理页面。想要看到效果需要返回主页面，单击左上角的Confluence徽标。
除管理页面外，所有页面现在都将具有此导航颜色。
4.加入colour-scheme模块
上一步骤我们将Confluence的头部栏改为黑色,功能相对简单.这一步骤我们使用colour-scheme模块来扩展主题以添加多种颜色。
- 打开
atlassian-plugin.xml文件。 - 在
和结束标签之间，添加以下代码。
<colour-scheme key="earth-colours" name="Brown and Red Earth Colours" class="com.atlassian.confluence.themes.BaseColourScheme">
<colour key="property.style.topbarcolour" value="#440000"/>
<colour key="property.style.spacenamecolour" value="#999999"/>
<colour key="property.style.headingtextcolour" value="#663300"/>
<colour key="property.style.linkcolour" value="#663300"/>
<colour key="property.style.bordercolour" value="#440000"/>
<colour key="property.style.navbgcolour" value="#663300"/>
<colour key="property.style.navtextcolour" value="#ffffff"/>
<colour key="property.style.navselectedbgcolour" value="#440000"/>
<colour key="property.style.navselectedtextcolour" value="#ffffff"/>
colour-scheme>
- 将
colour-scheme模块插入到theme模块,在结束标签之前添加以下代码。
<colour-scheme key="${project.groupId}.${project.artifactId}:earth-colours"/>
- 保存并关闭文件,此时的文件内容如下。
<atlassian-plugin key="${atlassian.plugin.key}" name="${project.name}" plugins-version="2">
<plugin-info>
<description>${project.description}description>
<version>${project.version}version>
<vendor name="${project.organization.name}" url="${project.organization.url}" />
<param name="plugin-icon">images/pluginIcon.pngparam>
<param name="plugin-logo">images/pluginLogo.pngparam>
plugin-info>
<resource type="i18n" name="i18n" location="theme-tutorial"/>
<web-resource key="theme-tutorial-resources" name="theme-tutorial Web Resources">
<dependency>com.atlassian.auiplugin:ajsdependency>
<resource type="download" name="theme-tutorial.css" location="/css/theme-tutorial.css"/>
<resource type="download" name="theme-tutorial.js" location="/js/theme-tutorial.js"/>
<resource type="download" name="images/" location="/images"/>
<context>theme-tutorialcontext>
web-resource>
<theme key="simpletheme" name="Simple Theme" class="com.atlassian.confluence.themes.BasicTheme">
<description>A simple custom themedescription>
<param name="includeClassicStyles" value="false"/>
<resource type="download" name="default-theme.css" location="/includes/css/default-theme.css">
<param name="source" value="webContext"/>
resource>
<resource type="download" name="theme-tutorial.css" location="/css/theme-tutorial.css"/>
<colour-scheme key="${project.groupId}.${project.artifactId}:earth-colours"/>
<space-ia value="true"/>
theme>
<colour-scheme key="earth-colours" name="Brown and Red Earth Colours" class="com.atlassian.confluence.themes.BaseColourScheme">
<colour key="property.style.topbarcolour" value="#440000"/>
<colour key="property.style.spacenamecolour" value="#999999"/>
<colour key="property.style.headingtextcolour" value="#663300"/>
<colour key="property.style.linkcolour" value="#663300"/>
<colour key="property.style.bordercolour" value="#440000"/>
<colour key="property.style.navbgcolour" value="#663300"/>
<colour key="property.style.navtextcolour" value="#ffffff"/>
<colour key="property.style.navselectedbgcolour" value="#440000"/>
<colour key="property.style.navselectedtextcolour" value="#ffffff"/>
colour-scheme>
atlassian-plugin>
- 在之前运行的终端通过
Ctrl+c快捷键终止目前运行的Confluence,然后输入atlas-run命令重新运行。 - 运行完成之后,刷新页面,你将看到以下效果。
如果看不到该效果: 您可能需要返回主题管理页面，先切回默认主题然后再切回自定义主题。然后，即使从管理页面，您也将看到应用的更改。
参考资料
[1]Confluence插件代码仓库: https://github.com/jenseny/confluence-plugin-tutorial.git
831
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
