Silverstripe中的靈活內容模塊

Question

我們正在研究使用Silverstripe CMS並希望能夠對模塊進行重新排序。

我們來自Wordpress設置，主要使用靈活的內容ACF字段。模塊（例如文本，標頭或視頻）需要能夠重新排序。

我們使用我們的CMS的作爲一個API，因此這些模塊是作爲一個部分，將頁面或交輸出：

[ 
    { 
    "id": 10, 
    "title": "Post title", 
    "slug": "post_slug", 
    "path": "/post_slug", 
    "template": "campaign", 
    "published": "2017-05-25 06:09:36", 
    "image": null, 
    "seo": { 
     "title": "", 
     "description": "", 
     "image": { 
     }, 
    }, 
    "sections": [ 
     { 
     "type": "masthead", 
     "Title": "", 
     "video": false, 
     "image": [ 

     ], 
     "showCta": false, 
     "cta": [ 

     ] 
     }, 
     { 
     "type": "video_text", 
     "video_text": [ 
      { 
      "type": "video", 
      "video_url": "https://www.youtube.com/watch?v=asdfa", 
      "video_length": "07:38", 
      "video_preview": false 
      }, 
      { 
      "type": "text", 
      "title": "Video Title", 
      "content": "Video text content", 
      "call_to_action": false, 
      "cta": [ 

      ] 
      } 
     ] 
     }, 
     { 
     "type": "text", 
     "title": "Text Title", 
     "content": "", 
     "alignment": "centre", 
     "call_to_action": false, 
     "cta": { 
      "text": "CTA button", 
      "link_type": "internal_link", 
      "internal_link": "about", 
      "external_link": "", 
      "section_id": [ 

      ] 
     } 
     }, 
    ] 
    } 
] 

是否Silverstripe有它的處理模塊/自己的方式，我需要拋棄這個靈活的內容模塊方法？其他人如何處理Silverstripe中靈活的內容模塊？

Answer 1

無論是銀色條紋還是銀色條紋都非常適合他們自己的角度，但我不認爲他們會達到您想要的效果。這些模塊並不能真正爲您提供使用預定義模板的功能。你可以掛鉤模板，但代碼會很大。我不確定是否還有一個開源模塊。

從您的JSON代碼中，爲了讓這些部分呈現如下所示的內容;

<section id="Sections"> 

    <div id="video_text" class="section"> 
     <iframe width="560" height="315" src="https://www.youtube.com/watch?v=asdfa" frameborder="0" allowfullscreen></iframe> 
    </section> 

    <div id="text" class="section"> 
     <h2>Text Title</h2> 
     <a class='text-center btn btn-default' href="/about/">CTA button</a> 
    </section> 

</sections> 

您可能想要這樣做。 爲您使用DataObjects（DO）部分，易於重新排序。 用Title（Varchar），Content（HTMLText），Sort（Int）等字段創建一個抽象的DO BlockSection，最重要的是創建一個帶有頁面的has_one。

對於視頻使用可以命名爲DO VideoBlockSection，它擴展BlockSection， TextBlockSection爲另一個。不要忘記每個DO的$ singular_name（對網格中的漂亮類命名有用）

頁上getCMSFields添加網格來管理節。您需要添加GridFieldSortableRows和GridFieldAddNewMultiClass，現在您可以在每個頁面上添加Section。

將頁面中的has_many添加到BlockSection，以及將會呈現塊並輸出html的方法。

Page.php 

private static $has_many = array(
    "Sections" => "BlockSection", 
); 

function SectionContent() 
$aContent = ArrayList::create(); 
$oSections = $this->Sections(); 
if (count($oSections)) { 
    foreach ($oSections as $oSection) { 
     $aContent->push(ArrayData::create([     
      "Section"  => $oSection, 
      "Content" => $oSection->renderWith([$oSection->ClassName, get_parent_class($oSection)]), 
     ])); 
    } 
} 
return $aContent; 

對於VideoBlockSection樣板陣列名單將VideoBlockSection和BlockSection

VideoBlockSection.ss

<div id="video_text_{$ID}" class="section"> 
    <iframe width="560" height="315" src="{$URL}" frameborder="0" allowfullscreen></iframe> 
</section> 

在你的具體情況，因爲你正在使用的API，你需要使用一個包裝呈現模板。 它需要[段]【類型】匹配模板（renderWith）video_text到VideoBlockSection

最後在Page.ss

<% loop $SectionContent %> 
    {$Content} 
<% end_loop %> 

這是一種概念證明，但它的工作對我來說重構，速度和內存使用率沒有考慮（但它的工作）。 這樣我不得不拋棄不必要的所謂的「頁面類型」，我發現它在大多數情況下不可重用。

這對我有效，我和Bootstrap 3一起使用它。我用它來創建CTA，視差滾動條，Google Map部分（在一個頁面上的多個地圖），縮略圖。指定圖像調整大小的方法（裁剪，ByWidth，ByHeight）。

請勿溝通靈活的內容模塊方法。 我正在開發一個與SS4和Bootstrap 4一起工作的開源模塊（可能使用任何其他html框架）