【问题】
已经可以成功的把docbook的ant webhelp集成到我自己的docbook编译环境了。
目前编译出来的webhelp中,很多类型的内容,都没有我之前格式化好的,易读的格式:
所以,现在想要把之前已有的相关的css配置文件,整合到ant webhelp系统中。
【解决过程】
1.先去针对已有的html去调试效果。
把之前css中的其中一个配置:
/* programlisting */
pre.programlisting {
/* background-color: #F4F4F4 ; */
background-color: Lavender ;
border: 1px solid #006600 ;
}加入到用ant webhlep生成的某个html文件中,变成:
...
<link rel="stylesheet" type="text/css" href="E:/Dev_Root/docbook/tools/docbook-xsl-ns-1.77.0/webhelp/docs/common/jquery/treeview/jquery.treeview.css" />
<style type="text/css">
/* programlisting */
pre.programlisting {
/* background-color: #F4F4F4 ; */
background-color: Lavender ;
border: 1px solid #006600 ;
}
noscript{
font-weight:bold;
}
input {
margin-bottom: 5px;
margin-top: 2px;
}
...结果没有生效,生成的代码,还是没有代码框。
2. 后来发现,原来上述没有效果,是由于<style type="text/css">后面的css相关配置,把上述的programlisting覆盖冲突掉了,所以需要把programlisting配置放到最后:
...
.ui-tabs { padding: .2em;}
.ui-tabs .ui-tabs-nav li { top: 0px; margin: -2px 0 1px; text-transform: uppercase; font-size: 10.5px;}
.ui-tabs .ui-tabs-nav li a { padding: .25em 2em .25em 1em; margin: .5em; text-shadow: 0 1px 0 rgba(255,255,255,.5); }
/* programlisting */
pre.programlisting {
/* background-color: #F4F4F4 ; */
background-color: Lavender ;
border: 1px solid #006600 ;
}
</style><script type="text/javascript" src="E:/Dev_Root/docbook/tools/docbook-xsl-ns-1.77.0/webhelp/docs/common/browserDetect.js">
<!----></script>
...就可以生成带代码框的效果了。
3.然后就又去尝试,把对应的css文件,common_html.css整个都添加进来。
结果放到了最后一个css之后的位置:
...
<link rel="stylesheet" type="text/css" href="E:/Dev_Root/docbook/tools/docbook-xsl-ns-1.77.0/webhelp/docs/common/jquery/treeview/jquery.treeview.css" />
<link rel="stylesheet" type="text/css" href="E:/Dev_Root/docbook/dev/config/docbook-xsl-ns-1.77.0/html/css/common_html.css" />
<style type="text/css">
noscript{
font-weight:bold;
}
...结果仍然是没有效果。
4.然后才又想起来,原来还是后面的css配置又覆盖了此处的自己的设置。
所以把css配置添加到整个stylesheet的最后,javascript的之前:
...
.ui-tabs { padding: .2em;}
.ui-tabs .ui-tabs-nav li { top: 0px; margin: -2px 0 1px; text-transform: uppercase; font-size: 10.5px;}
.ui-tabs .ui-tabs-nav li a { padding: .25em 2em .25em 1em; margin: .5em; text-shadow: 0 1px 0 rgba(255,255,255,.5); }
}
</style>
<link rel="stylesheet" type="text/css" href="E:/Dev_Root/docbook/dev/config/docbook-xsl-ns-1.77.0/html/css/common_html.css" />
<script type="text/javascript" src="E:/Dev_Root/docbook/tools/docbook-xsl-ns-1.77.0/webhelp/docs/common/browserDetect.js">
<!----></script>
...就可以了,最后的结果是所想要的,代码加框的效果了:
5。接着继续折腾,把上述的手动添加的css配置。
加入到ant webhelp的相关配置中。
最后找到了对应的生成此css配置的的地方,文件:
docbook-xsl-ns-1.77.0\webhelp\xsl\webhelp-common.xsl
中,所以把对应的配置添加进去即为:
...
.ui-tabs { padding: .2em;}
.ui-tabs .ui-tabs-nav li { top: 0px; margin: -2px 0 1px; text-transform: uppercase; font-size: 10.5px;}
.ui-tabs .ui-tabs-nav li a { padding: .25em 2em .25em 1em; margin: .5em; text-shadow: 0 1px 0 rgba(255,255,255,.5); }
</style>
<link rel="stylesheet" type="text/css" href="E:/Dev_Root/docbook/dev/config/docbook-xsl-ns-1.77.0/html/css/common_html.css" />
<!--
browserDetect is an Oxygen addition to warn the user if they're using chrome from the file system.
This breaks the Oxygen search highlighting.
-->
<script type="text/javascript" src="{$webhelp.common.dir}browserDetect.js">
<xsl:comment> </xsl:comment>
</script>
...这样,生成的html中,就可以把我自己的css配置:common_html.css,添加到合适的位置,得以生效,使得最终看到的html中,代码是带边框的,其他内容,也是相应的配置了。
6.不过,此处直接写绝对路径的css,还不是很好的做法,所以希望通过参数设置,决定加载的css文件。
这样方便更改所使用的css文件的位置,比如可以设置为本地的css,也可以设置为网站上的css。
后来就去添加参数控制css文件,结果本来打算添加到ant的build.properties中的但是失败了。
后来加到自定义的xsl文件webhelp_crl.xsl中:
<!-- custom css file path --> <!--<xsl:param name="custom.css.path">E:/Dev_Root/docbook/dev/config/docbook-xsl-ns-1.77.0/html/css/common_html.css</xsl:param>--> <xsl:param name="custom.css.path">https://www.crifan.org/files/res/docbook/css/common_html.css</xsl:param>
可见,就可以控制css是本地的还是在线的了。
然后对应的webhelp-common.xsl中添加的内容改为:
<link rel="stylesheet" type="text/css" href="{$custom.css.path}" />其中需要注意的是,不能写成:
<link rel="stylesheet" type="text/css" href="$custom.css.path" />
否则生成的内容中,导入的不是css文件,而只是字符$custom.css.path本身了。
【总结】
这样,最终就实现了如下需求:
(1)把css文件整合到ant的webhelp中
(2)可以通过参数制定css文件的位置,方便在本地和在线的css之间切换。

