如何在 TYPO3 10 中的 PageLayoutView 预览中分配模板？

Question

I would like to assign a template on my PageLayoutView preview in order to avoid writing HTML on my PHP files and better maintain it.我想在我的 PageLayoutView 预览中分配一个模板，以避免在我的 PHP 文件上写入 HTML 并更好地维护它。 How can i achieve that using TYPO3 10?我如何使用 TYPO3 10 来实现这一点？

I would like to use it for example on the textmedia content element and add the subheader in.例如，我想在textmedia内容元素上使用它并添加子标题。

Answer 1

In order to achieve that, you will have to use the Standalone view.为了实现这一点，您将不得不使用独立视图。 I would write a function which i can call it whenever i want to use it.我会写一个 function，只要我想使用它就可以调用它。 Normally i would include the function on a Helper Class but for the sake of this answer i will put it on the same class.通常我会在助手 Class 上包含 function 但为了这个答案，我会将它放在同一个 class 上。 So lets say we have the textmedia content element and we want to add fields on the backend Preview.所以假设我们有textmedia内容元素，我们想在后端预览中添加字段。

use TYPO3\CMS\Core\Utility\GeneralUtility;
use TYPO3\CMS\Fluid\View\StandaloneView;

/**
 * Contains a preview rendering for the page module of CType="textmedia"
 */
class TextMediaPreviewRenderer implements PageLayoutViewDrawItemHookInterface
{
    /**
     * Preprocesses the preview rendering of a content element of type "textmedia"
     *
     * @param \TYPO3\CMS\Backend\View\PageLayoutView $parentObject Calling parent object
     * @param bool $drawItem Whether to draw the item using the default functionality
     * @param string $headerContent Header content
     * @param string $subheaderContent Subheader content
     * @param string $itemContent Item content
     * @param array $row Record row of tt_content
     */
    public function preProcess(
        PageLayoutView &$parentObject,
        &$drawItem,
        &$headerContent,
        &$subheaderContent,
        &$itemContent,
        array &$row
    ) {

         if ($row['CType'] === 'textmedia') {

             $standaloneView = $this->getStandAloneConfig();

             /*Disable TYPO3's default backend view configuration */
             $drawItem = false;

               
             /*Assign all the results to the backend */
             $standaloneView->assignMultiple([
                'title'             => $parentObject->CType_labels[$row['CType']],
                'type'              => $row['CType'],
                'content'           => $row,
               
             ]);

             $itemContent .= $standaloneView->render();
         }
     }

     public function getStandAloneConfig()
     {
        $standaloneView = GeneralUtility::makeInstance(StandaloneView::class);
        $standaloneView->setLayoutRootPaths([10,'EXT:your_extension/Resources/Private/Backend/Layouts/']);
        $standaloneView->setTemplateRootPaths([10,'EXT:your_extension/Resources/Private/Backend/Templates/']);
        $standaloneView->setPartialRootPaths([10,'EXT:your_extension/Resources/Private/Backend/Partials/']);
        $standaloneView->setFormat('html');
        $standaloneView->setTemplate('PageLayoutView.html');

        return $standaloneView;
    }

What is happening is the following发生的事情如下

First, we get the StandAlone configuration.首先，我们得到 StandAlone 配置。 In this configuration ( getStandAloneConfig() ) we set the path to where our templates, partials and layouts are.在此配置（ getStandAloneConfig() ）中，我们将路径设置为模板、部分和布局所在的位置。 Then we assign the type ( html ) and then the name of the template where our preview is going to be built on ( PageLayoutView.html ).然后我们指定类型（ html ），然后是我们的预览将在其中构建的模板的名称（ PageLayoutView.html ）。

After that we reset everything that TYPO3 writes on the Preview ( $drawItem = false; ) so we can write our own.之后，我们重置 TYPO3 在 Preview ( $drawItem = false; ) 上写入的所有内容，以便我们自己编写。

Last and not least we assign the variables which we are going to use on the HTML file.最后同样重要的是，我们分配了我们将在 HTML 文件中使用的变量。

Under your_extension/Resources/Private/Backend/Templates/PageLayoutView.html在your_extension/Resources/Private/Backend/Templates/PageLayoutView.html下

<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" data-namespace-typo3-fluid="true">
    <f:switch expression="{type}">
        <f:case value="textmedia">
            <f:render partial="Textmedia" arguments="{_all}"/>
        </f:case>
        <f:case value="text">
            <f:render partial="Text" arguments="{_all}"/>
        </f:case>
       <f:defaultCase>
            <f:render partial="Header" arguments="{_all}"/>
        </f:defaultCase>
    </f:switch>
</html>

I personally use the PageLayoutView.html as a controller which decides, which partial should be rendered.我个人使用PageLayoutView.html作为 controller 来决定应该渲染哪个部分。 So i assign the variable {type} and i render the partial based on its value.所以我分配变量{type}并根据它的值渲染部分。

Under your_extension/Resources/Private/Backend/Partials/Textmedia.html在your_extension/Resources/Private/Backend/Partials/Textmedia.html 下

<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" data-namespace-typo3-fluid="true">

   <p><strong class="element_title">{title}</strong></p>
   <table class="element_table">
      <tbody>
          <tr>
             <th>Subheader</th>
             <td>{content.subheader}</td>
          </tr>
      </tbody>
   </table>
</html>

Now you can look what is inside the {content} variable and render it on your HTML.现在您可以查看{content}变量中的内容并将其呈现在 HTML 上。

If you want to style your Preview you can do the following: Under your ext_tables.php add the following line:如果要设置预览的样式，可以执行以下操作：在ext_tables.php下添加以下行：

$GLOBALS['TBE_STYLES']['stylesheet'] = 'EXT:your_extension/Resources/Public/Css/Backend/page-layout-view.css';

Answer 2

There's a pretty easy way.有一个很简单的方法。 Just set an alternative path for the preview templates.只需为预览模板设置替代路径。

\TYPO3\CMS\Backend\View\PageLayoutView::tt_content_drawItem(): \TYPO3\CMS\Backend\View\PageLayoutView::tt_content_drawItem():

// If the previous hook did not render something,
// then check if a Fluid-based preview template was defined for this CType
// and render it via Fluid. Possible option:
// mod.web_layout.tt_content.preview.media = EXT:site_mysite/Resources/Private/Templates/Preview/Media.html
if ($drawItem) {
    $fluidPreview = $this->renderContentElementPreviewFromFluidTemplate($row);
    if ($fluidPreview !== null) {
        $out .= $fluidPreview;
        $drawItem = false;
    }
}

如何在 TYPO3 10 中的 PageLayoutView 预览中分配模板？

问题描述

2 个解决方案

解决方案1
1 已采纳 2020-12-06 21:26:18

解决方案2
0 2020-12-07 07:56:22

如何在 TYPO3 10 中的 PageLayoutView 预览中分配模板？

问题描述

2 个解决方案

解决方案1 1 已采纳 2020-12-06 21:26:18

解决方案2 0 2020-12-07 07:56:22

解决方案1
1 已采纳 2020-12-06 21:26:18

解决方案2
0 2020-12-07 07:56:22