最新消息:20190717 VPS服务器:Vultr新加坡,WordPress主题:大前端D8,统一介绍入口:关于

【已解决】docbook中,给ant webhelp系统中,添加自定义的css文件

Docbook crifan 949浏览 0评论

【问题】

已经可以成功的把docbook的ant webhelp集成到我自己的docbook编译环境了。

目前编译出来的webhelp中,很多类型的内容,都没有我之前格式化好的,易读的格式:

no css html

所以,现在想要把之前已有的相关的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>
...

就可以了,最后的结果是所想要的,代码加框的效果了:

own css html

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.com/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之间切换。

转载请注明:在路上 » 【已解决】docbook中,给ant webhelp系统中,添加自定义的css文件

发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
46 queries in 0.132 seconds, using 18.89MB memory