如何将html模板集成到typo3

时间:2017-12-17 13:16:13

标签: typo3 typoscript

我是typo3的新手,我想将HTML模板集成到其中。但是我无法将我的内容添加到投放仪表板的页面上,我得到的只是一个空白页面。

我正在使用TYPO3 v8

问候!

1 个答案:

答案 0 :(得分:0)

The steps you need to do for template integration in TYPO3 8

TYPOSCRIPT

Tell TYPO3 by where the templates should be get.

 $rootPath = "/var/www/cakephp/plugins/EstelamBasic";
    $zipFileName = $rootPath.'.zip';
    $zip = new ZipArchive();
    $zip->open($zipFileName, ZipArchive::CREATE | ZipArchive::OVERWRITE);

    addFolderToZip($rootPath."/", $zip, $zipdir = '');
    $zip->close();

    function addFolderToZip($dir, $zipArchive, $zipdir = ''){ 

        if (is_dir($dir)) { 
            if ($dh = opendir($dir)) { 

                //Add the directory 
                if(!empty($zipdir)) $zipArchive->addEmptyDir($zipdir); 

                // Loop through all the files 
                while (($file = readdir($dh)) !== false) { 

                    //If it's a folder, run the function again! 

                    if(!is_file($dir . $file)){ 
                        // Skip parent and root directories 
                        if( ($file !== ".") && ($file !== "..")){ 
                            addFolderToZip($dir . $file . "/", $zipArchive, $zipdir . $file . "/");
                        } 

                    }else{ 
                        // Add the files 
                        $zipArchive->addFile($dir . $file, $zipdir . $file); 

                    } 
                } 
            } 
        } 
    } 

LAYOUTS

It's not required to create a layout, but i suggest to do it, also if you have just one type of template.

The layouts ( in TYPO3 called Backend Layouts ) can be created in TYPO3 backend and the backend layouts are saved in database. But you can save the backend layouts configuration in a file.

Hint: Try save the backend layouts configuration in files so you can add to git

Example of backend layout configuration:

page = PAGE
page.10 {
    templateRootPaths {
       10 = PATH TO YOUR TEMPLATES
    }
    layoutRootPaths {
       10 = PATH TO YOUR LAYOUTS
    }
    partialRootPaths {
       10 = PATH TO YOUR PARTIALS
    }
    templateName = TEXT
    templateName.stdWrap {
        cObject = TEXT
        cObject {
            data = levelfield:-2,backend_layout_next_level,slide
            override.field = backend_layout
            split {
                token = pagets__
                1.current = 1
                1.wrap = |
            }
        }
        ifEmpty = Home
     }
}

ColPos meaning: you can have multiple columns in a layout, and the colPos is used to render the content in frontend. This is what will be used later in template mod.web_layout.BackendLayouts { Home # identified by this name { title = Home # this is shown in backend when you select the layout icon = EXT:example_extension/Resources/Public/Images/BackendLayouts/default.gif config { backend_layout { colCount = 1 rowCount = 1 rows { 1 { columns { 1 { name = Content colPos = 1 # this is important, i'm talking about colPos below } } } } } } } }

The above configuration should be included in PageTs. This is found if you edit a page and go to Resources tab.

Typoscript configuration of <f:cObject typoscriptObjectPath="lib.dynamicContent" data="{colPos: 1}" />

lib.dynamicContent

Home layout html integration

lib.dynamicContent = COA
lib.dynamicContent {
    5 = LOAD_REGISTER
    5 {
        colPos.cObject = TEXT
        colPos.cObject {
            field = colPos
            ifEmpty.cObject = TEXT
            ifEmpty.cObject {
                value.current = 1
                ifEmpty = 0
            }
        }
        pageUid.cObject = TEXT
        pageUid.cObject {
            field = pageUid
            ifEmpty.data = TSFE:id
        }
        contentFromPid.cObject = TEXT
        contentFromPid.cObject {
            data = DB:pages:{register:pageUid}:content_from_pid
            data.insertData = 1
        }
        wrap.cObject = TEXT
        wrap.cObject {
            field = wrap
        }
        maxItems.cObject = TEXT
        maxItems.cObject {
            field = maxItems
            ifEmpty =
        }
    }
    20 = CONTENT
    20 {
        table = tt_content
        select {
            includeRecordsWithoutDefaultTranslation = 1
            orderBy = sorting
            where = {#colPos}={register:colPos}
            where.insertData = 1
            pidInList.data = register:pageUid
            pidInList.override.data = register:contentFromPid
            max.data = register:maxItems
            // select.languageField setting is needed if you use this typoscript in TYPO3 < v7
            // languageField = sys_language_uid
        }
        stdWrap {
            dataWrap = {register:wrap}
            required = 1
        }
    }
    90 = RESTORE_REGISTER
}
lib.dynamicContentSlide < lib.dynamicContent
lib.dynamicContentSlide.20.slide = -1

lib.dynamicContentFirst < lib.dynamicContent
lib.dynamicContentFirst.20.select.max = 1

Home template integration

<f:render section="main" />

Now we have the setup of layouts and templates. Hope that you have a basic setup of TYPO3 ( a root page at least and a template setup )

If you don't have this setup already, follow the next steps:

  1. Create a root page
  2. Go with list on root page
  3. Create a Template record - go in Options tab and check <f:layout name="Home" /> <f:section name="content"> // content <f:cObject typoscriptObjectPath="lib.dynamicContent" data="{colPos: 1}" /> </f:section> and Clear -> Constants and check also Clear -> setup
  4. Go in Rootlevel tab and select from the multiple selectbox Includes
  5. Paste the fluid_styled_content in the created template ( check General Tab )

Edit Root page and go to the Appearance tab to select the Backend Layout.