How to Create One Page TYPO3 Site? (Using TypoScript)

Do you want to know how to create a one-page TYPO3 Site? (Using TypoScript) This little TypoScript tutorial will help you to easily create one page TYPO3 site with best backend usability.

Step 1. Create menu with #Hash-tag

<!-- At your TypoScript Menu or Fluid DataProcessing Template -->
<a href="#{item.title}">{item.title}</a>

Step 2. Prepare TypoScript Object to Render All Pages

// TypoScript Object to get all pages content
lib.onePageScrollContent = CONTENT
lib.onePageScrollContent {
    table = pages
    select {
        languageField = sys_language_uid
        pidInList = {$ns_basetheme.website.settings.main_menu}
        where = nav_hide = 0
        orderBy = sorting
    }
    renderObj = COA
    renderObj {
        5 = TEXT
        5 {
            field = title
            htmlSpecialChars = 1
            wrap = <section id="|">
            stdWrap.case = lower
            stdWrap.replacement {
                10 {
                    search.char = 32
                    replace.char = 45
                }
                15 {
                    search = /
                    replace = 
                }
            }
        }

        20 = CONTENT
        20 {
            table = tt_content
            select {
                languageField = sys_language_uid
                pidInList.field = uid
                orderBy = sorting
                where = colPos = 0
            }
            stdWrap.wrap = |</section>
            stdWrap.wrap.insertData = 1
        }
    }
}

Step 3. Render TypoScript Object at Fluid Template

// Fluid rendering for home and all pages content
<f:cObject typoscriptObjectPath="lib.content"/>
<f:cObject typoscriptObjectPath="lib.onePageScrollContent"/>

Post a Comment

×

    Got answer to the question you were looking for?