书籍阅读器工具集成Drupal 7

时间:2011-12-17 05:58:20

标签: javascript drupal-7 integration

我集成了一个用javascript编写的书籍阅读器工具Monoscle来获取书籍阅读器格式的node.tpl内容。我在我的php文档上测试它,它工作得很好,我能够从monoscle工具中获取数据库中的内容。

然而,我无法在Drupal中做同样的事情,即我想要 TOOL中的内容node.tpl

我按照这些步骤迭代了该工具。

  1. 我在主题
  2. 下的Bartic.info文件中添加了JavaScripts和css
  3. 在node.tpl中启动了一些JavaScript [因为它放在Bartic.info时没有启动/工作]
  4. 将呈现的内容放在node.tpl中的div中,该内容由JavaScript

    启动

    <div id="rabbit"><?php print render($content); ?></div>

    现在的问题是收到Monoscle框架而不是内容 - 既不是$ content也不是任何段落。

1 个答案:

答案 0 :(得分:0)

我已经浏览了图书翻转工具Monoscle并且还在drupal系统上成功实现了此工具..

1]在单独的目录中复制所有文件css和javascripts

2]现在,在您theme.info上启动一些javascript路径,当您提及其bartik.info文件时,这些路径应按顺序排列

3]首先使用bartikbook主题目录的脚本中创建一个目录,您可以将monoscle文件上的所有文件单独放置...甚至用于CSS文件。

4]下面是订单

stylesheets[all][] = css/book/styles/monocore.css
stylesheets[all][] = css/book/styles/monoctrl.css
stylesheets[all][] = css/book/styles/rabbit_css.css

    scripts[] = scripts/jquery.js
    `this is the jquery library you need to added up`

scripts[] = scripts/book/scripts/monocore.js
scripts[] = scripts/book/scripts/core/monocle.js
scripts[] = scripts/book/scripts/compat/env.js
scripts[] = scripts/book/scripts/compat/css.js
scripts[] = scripts/book/scripts/compat/stubs.js
scripts[] = scripts/book/scripts/compat/browser.js

scripts[] = scripts/book/scripts/core/events.js
scripts[] = scripts/book/scripts/core/factory.js
scripts[] = scripts/book/scripts/core/styles.js
scripts[] = scripts/book/scripts/core/reader.js
scripts[] = scripts/book/scripts/core/book.js
scripts[] = scripts/book/scripts/core/component.js
scripts[] = scripts/book/scripts/core/place.js

scripts[] = scripts/book/scripts/controls/panel.js
scripts[] = scripts/book/scripts/panels/twopane.js
scripts[] = scripts/book/scripts/panels/eink.js

scripts[] = scripts/book/scripts/dimensions/columns.js
scripts[] = scripts/book/scripts/flippers/slider.js
scripts[] = scripts/book/scripts/flippers/instant.js
scripts[] = scripts/book/scripts/dimensions/vert.js
scripts[] = scripts/book/scripts/flippers/legacy.js

scripts[] = scripts/book/rabbit_start.js

scripts[] = scripts/book/rabbit_start.js是自定义脚本文件,其中包含单一代码

   Monocle.DEBUG = true;

      // Initialize the reader element.
      Monocle.Events.listen(
        window,
        'load',
        function () { window.reader = Monocle.Reader('rabbit'); }
      );

还有stylesheets[all][] = css/book/styles/rabbit_css.css

我们需要在#rabbit中的每个选择器样式的前面添加rabbit_css.css,以下是css代码

#rabbit {
        width: 300px;
        height: 420px;
        border: 1px solid #000;
        background-color: #CCC;
        overflow: hidden;
}

#rabbit p {
        line-height: 130%;
      }
#rabbit      img {
        max-width: 98%;
        max-height: 98%;
        -webkit-column-break-before: always;
      }
#rabbit      .dedication {
        text-align: center;
        font-style: italic;
        margin: 16em 0 10em;
      }
 #rabbit    .center {
        text-align: center;
      }
#rabbit      h1, h2, h3 {
        text-align: center;
      }
#rabbit      h1 small {
        font-size: 85%;
        font-variant: small-caps;
      }
 #rabbit     h2 {
        margin-bottom: 3em;
        font-weight: normal;
      }
 #rabbit     h2 small {
        font-size: 85%;
        font-style: italic;
      }

5]选择需要使用的内容类型,例如,您有articles作为内容类型...然后复制node.tpl.php并粘贴它&amp;使用node--articles.tpl.php

重命名

6]打开node--articles.tpl.php并搜索<?php print render($content); ?> ..此代码显示文章类型的内容。

7]现在使用内容类型

中所需的文件编辑该代码
<div id="rabbit"><?php print render($content); ?></div>

<div id="rabbit"><?php print render($content['field_name']); ?></div>

8]保存所有文件并转到Configuration->Performance->Clear cache

9]现在打开您想要的文章,它将以monoscle书籍阅读器格式显示..