Fatal编程技术网
  • css/
  • 在Genshi（TurboGears 2）中添加小部件（动态）CSS

在Genshi（TurboGears 2）中添加小部件（动态）CSS

css templates

在Genshi（TurboGears 2）中添加小部件（动态）CSS,css,templates,head,turbogears2,genshi,Css,Templates,Head,Turbogears2,Genshi,我试图弄清楚如何将Genshi中的CSS添加到一些动态生成的标记中。我试图避免内联CSS，理想情况下，规则将出现在父文档的标记中 我正在使用的现有代码看起来是这样的（为了简化，我从原始代码中重写了它，因此我可能会有一些语法错误；但是原始代码是这样的，所以我认为如果有语法错误，您可以忽略）： 模板/widgets/file_widget.html <html xmlns:py="http://genshi.edgewall.org/" xmlns:xi="http://www.w3.o

我试图弄清楚如何将Genshi中的CSS添加到一些动态生成的标记中。我试图避免内联CSS，理想情况下，规则将出现在父文档的
标记中

我正在使用的现有代码看起来是这样的（为了简化，我从原始代码中重写了它，因此我可能会有一些语法错误；但是原始代码是这样的，所以我认为如果有语法错误，您可以忽略）：

模板/widgets/file_widget.html

<html xmlns:py="http://genshi.edgewall.org/"
  xmlns:xi="http://www.w3.org/2001/XInclude"
  py:strip="">
<head>
  <style type="text/css">
      .file-widget {
          background-color:#eee; display:inline-block; padding:4px;
      }
  </style>
</head>
<py:def function="file_widget(file_name)">
  <div class=".file-widget">
    ...
  </div>
</py:def>
</html>

<div py:for='widget in app.widgets'>
    ${ genshi.core.Markup( widget.html() ) }
</div>


.file小部件{
背景色：#eee；显示：内联块；填充：4px；
}
...
widgets.py

class FileWidget:

...

    def html():
        markup_template = genshi.template.MarkupTemplate('''
            <html xmlns="http://www.w3.org/1999/xhtml" xmlns:py="http://genshi.edgewall.org/" xmlns:xi="http://www.w3.org/2001/XInclude">
                <xi:include href="my_project/widgets/file_widget.html" />
                ${description}
                ${file_widget(file_name)}
            </html>''')
        markup = markup_template.generate(file_name = self.file_name,  description = genshi.core.Markup(self.description))
        return markup.render('html', doctype = 'html')

类文件小部件：
...
def html（）：
markup_template=genshi.template.MarkupTemplate（“”）
${description}
${file\u小部件（file\u名称）}
''')
markup=markup\u template.generate（file\u name=self.file\u name，description=genshi.core.markup（self.description））
返回markup.render（'html'，doctype='html'）
模板/main_page.html

<html xmlns:py="http://genshi.edgewall.org/"
  xmlns:xi="http://www.w3.org/2001/XInclude"
  py:strip="">
<head>
  <style type="text/css">
      .file-widget {
          background-color:#eee; display:inline-block; padding:4px;
      }
  </style>
</head>
<py:def function="file_widget(file_name)">
  <div class=".file-widget">
    ...
  </div>
</py:def>
</html>

<div py:for='widget in app.widgets'>
    ${ genshi.core.Markup( widget.html() ) }
</div>


${genshi.core.Markup（widget.html（））}
不幸的是，
标记被渲染了两次：一次，正如我所希望的那样，在原始文档
中，然后小部件
被再次渲染

如何更改代码以在正确的位置正确包含CSS？由于这是一个协作代码，所以很少的更改和更清晰的代码是值得赞赏的

感谢您的阅读和帮助。

您可能希望使用类似于
ToscaWidget2
的小部件库，该库用于实际管理具有资源的小部件

否则，您可能需要使用一个静态文件框架，如
fanstatic
，它提供了对资源包含的支持：

如果您想滚动您自己的自定义解决方案，那么应该在呈现小部件时（如在请求中）在某处注册资源，然后在呈现模板时将它们添加到head标记中。这实际上就是
tw2.core.resources
所做的：

谢谢你的回答
tw2.core.CSSLink
和
tw2.core.JSSource
看起来很适合，但我不确定如何将它们合并到上面的代码中。正如我所解释的，我正在一个协作项目中编辑现有代码。更改或添加库更加困难。