如何修改nbconvert的Jinja模板?

时间:2013-10-23 19:17:23

标签: ipython-notebook

我正在尝试寻找显示我的IPython笔记本的其他方法。

我目前正在做的是修改这里找到的Jinja模板(C:\ Anaconda \ Lib \ site-packages \ ipython-1.1.0-py2.7.egg \ IPython \ nbconvert \ templates)然后简单地使用nbconvert命令行工具将它们导出为HTML文件。此方法有效,但我无法修改笔记本的实际布局。

以下是我希望笔记本电脑看起来如何的一些示例。

Example 1

Example 2

Example 3

Example 4

修改
Here 就是我能够在笔记本中添加一些HTML代码。

示例代码:

from IPython.display import HTML

bottom = """

<div style="background:darkblue;color:white;border-radius:10px 10px 10px 10px;">
<br>
      <div class="container-fluid">

      <div class="row-fluid">
        <div class="span12">
          <!--Sidebar content-->
          <font size="5"><strong><p>A powerful course of study for:</p></strong></font>
          <br>

          <ul>
            <li>The basic foundation for Data Analysis</li>
            <li>Hands-on experience with seasoned professionals</li>
            <li>Entry-level IT professionals seeking a strong foundation</li>
            <li>Managers who manage small to large scale analytical projects</li>
          </ul>
      </div>

      </div>      
      </div>
</div>

"""

HTML(bottom)

1 个答案:

答案 0 :(得分:0)

起初我不确定这是否是一个“真实”的问题,因为笔记本和报纸之间存在显着差异!
但是,如果问题的目的是在nbconverted笔记本中获取多列,我建议使用Google搜索html multicolumn。在那里你会发现一些选项,包括基于CSS的样式 使用此方法只需复制html_full模板并添加div样式,如

div.mcolumn {
    -webkit-colums: 3 200px;
    -moz-column-count: 3;
    -moz-column-width: 200px;
    columns: 3 200px;

    -moz-column-gap:30px; /* Firefox */
    -webkit-column-gap:30px; /* Safari and Chrome */
    column-gap:30px;

    -moz-column-rule:1px dotted #aaaaaa; /* Firefox */
    -webkit-column-rule:1px dotted #aaaaaa; /* Safari and Chrome */
    column-rule:1px dotted #aaaaaa;
}

将整个页面(正文块)嵌入此div和voilá中,您有3列布局。但是,请注意代码单元格和图像可能会导致一些问题。

相关问题