[TASK] Update Fluid theme section (#5387)

to take new PAGEVIEW into account

Resolves: #3255
Releases: main, 13.4

Author: linawolf

Documentation/ApiOverview/Fluid/Introduction.rst

@@ -204,68 +204,72 @@ import can be done in the template or the partial.
 
 ..  _fluid-theme-example:
 
-Example: Using Fluid to create a theme
-======================================
+Example: Using Fluid to create a theme for a site package
+=========================================================
 
-This example was taken from the `example extension <https://github.com/TYPO3-Documentation/site_package/>`__
-for :ref:`t3sitepackage:start` and reduced to a very basic example.
+This example was taken from a theme created by the
+`Site Package Builder <https://get.typo3.org/sitepackage/new/>`_
+ and reduced to a very basic example.
 
-The site package tutorial walks you through the creation of a site package
-(theme) using Fluid. In our simplified example, the overall structure of
-a page is defined by a layout "Default". We show an example of a three
-column layout. Further templates can be added later, using the same layout.
+..  seealso::
+    *   If you want to try this out, you can `Generate a site package with the
+        official builder <https://docs.typo3.org/permalink/t3sitepackage:site-package-builder>`_.
+    *   The `Site package tutorial <https://docs.typo3.org/permalink/t3sitepackage:start>`_
+        describes the usage of the templates step by step.
 
 ..  directory-tree::
     :show-file-icons: true
 
-    *   EXT:my_sitepackage/
+    *   packages/my_sitepackage/
 
-        *   Configuration
+        *   Configuration/Sets/SitePackage/setup.typoscript
 
-            *   Typoscript
+        *   Resources/Private/PageView
 
-                *   setup.typoscript
+            *   Layouts
 
-        *   Resources
-
-            *   Private
+                *   PageLayout.html
 
-                *   Layouts
+            *   Partials
 
-                    *   Page
+                *   Content.html
+                *   Footer.html
+                *   ...
 
-                        *   Default.html
+            *   Pages
 
-                *   Partials
+                *   Default.html
+                *   Subpage.html
 
-                    *   Page
+Set the Fluid base path with TypoScript using the
+`PAGEVIEW <https://docs.typo3.org/permalink/t3tsref:cobj-pageview>`_ TypoScript
+object.
 
-                        *   Jumbotron.html
+..  literalinclude:: _Introduction/_pageview.typoscript
+    :caption:  packages/my_sitepackage/Configuration/Sets/SitePackage/setup.typoscript
 
-                *   Templates
+The template in file :file:`Pages/Default.html` is automatically used whenever there is
+no specific template for the current `Backend layout <https://docs.typo3.org/permalink/t3coreapi:be-layout>`_ of the page.
 
-                    *   Page
+..  literalinclude:: _Introduction/_Default.html
+    :caption: EXT:my_sitepackage/Resources/Private/PageView/Pages/Default.html
 
-                        *   ThreeColumn.html
+It includes the layout :file:`Layouts/PageLayout.html`. And uses partial
+:file:`Partials/Content.html` to display its content.
 
-Set the Fluid paths with TypoScript using :ref:`t3tsref:cobj-fluidtemplate`
+It uses the partial :file:`Partials/Content.html` to display its content.
 
-..  literalinclude:: _Introduction/_lib.dynamicContent.typoscript
-    :caption: my_sitepackage/Configuration/TypoScript/setup.typoscript
+..  literalinclude:: _Introduction/_Content.html
+    :caption: Resources/Private/PageView/Partials/Content.html
 
-..  literalinclude:: _Introduction/_Default.html
-    :caption: EXT:my_sitepackage/Resources/Private/Layouts/Page/Default.html
+The template for a different backend layout will look similar, but has for
+example two columns:
 
-..  literalinclude:: _Introduction/_ThreeColumn.html
-    :caption: my_sitepackage/Resources/Private/Templates/Page/ThreeColumn.html
+..  literalinclude:: _Introduction/_Subpage.html
+    :caption: my_sitepackage/Resources/Private/PageView/Page/Subpage.html
 
-*   The template uses the layout "Default". It must then define all sections that the layout
-    requires: "Header", "Main" and "Footer".
-*   In the section "Main", a partial "Jumbotron" is used.
-*   The template makes use of column positions (colPos). The content elements for each section
-    on the page will be rendered into the correct `div`. Find out more about this in :ref:`be-layout`.
-*   Again, we are using Object Accessors to access data (e.g. `{colPos: '2'}`) that has been
-    generated elsewhere.
+The page layout takes care of elements that are shared across all or most page
+types:
 
-..  literalinclude:: _Introduction/_Jumbotron.html
-    :caption: Resources/Private/Partials/Page/Jumbotron.html
+..  literalinclude:: _Introduction/_PageLayout.html
+    :caption: my_sitepackage/Resources/Private/PageView/Layouts/PageLayout.html

Documentation/ApiOverview/Fluid/_Introduction/_Content.html

@@ -0,0 +1,7 @@
+<f:for each="{records}" as="record">
+    <f:cObject
+        typoscriptObjectPath="{record.mainType}"
+        data="{record}"
+        table="{record.mainType}"
+    />
+</f:for>

Documentation/ApiOverview/Fluid/_Introduction/_Default.html

@@ -1,3 +1,7 @@
-<f:render section="Header" />
-<f:render section="Main" />
-<f:render section="Footer" />
+<f:layout name="PageLayout"/>
+<f:section name="Main">
+    <div class="container">
+        <f:render partial="Content" arguments="{records: content.main.records}"/>
+    </div>
+
+</f:section>

Documentation/ApiOverview/Fluid/_Introduction/_Jumbotron.html

@@ -0,0 +1,6 @@
+<f:asset.css identifier="main" href="EXT:my_site_package/Resources/Public/Css/main.css" />
+<main>
+    <f:render partial="Header" arguments="{_all}"/>
+    <f:render section="Main"/>
+    <f:render partial="Footer" arguments="{_all}"/>
+</main>

Documentation/ApiOverview/Fluid/_Introduction/_PageLayout.html

@@ -0,0 +1,13 @@
+<f:layout name="PageLayout"/>
+<f:section name="Main">
+    <div class="container">
+        <div class="row">
+            <div class="col-md-8">
+                <f:render partial="Content" arguments="{records: content.main.records}"/>
+            </div>
+            <div class="col-md-4">
+                <f:render partial="Content" arguments="{records: content.sidebar.records}"/>
+            </div>
+        </div>
+    </div>
+</f:section>

Documentation/ApiOverview/Fluid/_Introduction/_Subpage.html

@@ -0,0 +1,15 @@
+page = PAGE
+page {
+  10 = PAGEVIEW
+  10 {
+    paths {
+      0 = EXT:my_site_package/Resources/Private/PageView/
+      10 = {$MySitePackage.template_path}
+    }
+
+    dataProcessing {
+      # makes content elements available as {content} in Fluid template
+      10 = page-content
+    }
+  }
+}