ブックリーダーツールの統合Drupal 7

Question

ブックリーダーのツールでnode.tplのコンテンツを取得するには、ブックリーダーツールMonoscleをjavascriptで統合しました。私は私のPHPのドキュメントでそれをテストし、それは素晴らしい、私はmonoscleツールでデータベースからコンテンツを取得することができて働いていた。

はしかし、Drupalの中で同じことを行うことができないイムはつまり、私はツールでnode.tplのコンテンツが欲しいです！

私はこのツールを逆解析するために上記の手順に従った。

1. [そのが開始していないのでBartic.infoに置かれたときに働い/]私はnode.tplにいくつかのJavaScriptを開始

2. をテーマ下Bartic.infoファイル内のJavaScriptとCSS

3. を追加したレンダリングされたコンテンツを置きましたどちらも$コンテンツがないから - 今のものはMonoscleフレームワークではなく、コンテンツを取得していますされるJavaScript

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

   によって開始されたnode.tplでdivの、内部任意の段落。私は本の反転ツールMonoscle経ともDrupalのシステム上で正常にこのツールを実装している

Answer 1

..

1]は

2別々のディレクトリ内のすべてのファイルのCSSとJavaScriptをコピー]現在、いくつかのInitilize javascriptパスtheme.infoとそのbartik.infoファイルがあり、これらのパスは順番に並べる必要があります。

3]まず、bartikのスクリプトでディレクトリを作成します。私のディレクトリbookと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がカスタムそれがmonoscleコード

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_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をコピーして、それがnode--articles.tpl.php

6]を開きnode--articles.tpl.phpと検索して名前を変更&ペースト<?php print render($content); ?>の場合..このコードは商品タイプの内容を表示します。

7]ここでコードを編集してください...コンテンツタイプでご希望のfiledsで

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

または

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

]は、すべてのファイルを保存して行く Configuration->Performance->Clear cache

9]今、あなたの希望の記事を開いて、それがmonoscle書籍リーダー形式で表示されます..