Skip to content

Commit 13a7318

Browse files
jonirouAtTalanjonirouAtTalan
authored
Update Fluid Templates page doc (#270)
* Update EmptyInstallation.png Update version and project name * Update PageModule.png Update TYPO3 version (not -dev) And foolowing tutorial, recycler extension is installed * Update assets path in diff file * Update image path in diff file * Update extension key * Update remove header diff file Because <nav> first part was not marked as removed from template * Update header.html partial path with good extension folder name * Update extension structure renderering with goodindentation * Update DefaultWithPartial.html code snippet * Update remove menu from header path and diff file * Update move_content_to_section assets path path and diff file the rendering of Header partial was marked as removed * Update DefaultWithSection code snippet * Update the subpageWithSection code snippet Linked to the TYPO3-Documentation/site_package#42 * Add breadcrumb extract to a partial documentation * Update extension folder name on Layout and Layout diff * Remove Layout.html codesnippet creation bloc * Add footer menu extract to a partial
1 parent f4ffd2b commit 13a7318

15 files changed

+114
-63
lines changed

‎Documentation/CodeSnippets/Fluid/Layout.rst.txt‎

Lines changed: 5 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,13 @@
1-
.. Generated by https://github.com/TYPO3-Documentation/t3docs-codesnippets
2-
.. Extracted from EXT:site_package/Resources/Private/Templates/Layouts/Layout.html
3-
41
.. code-block:: html
5-
:caption: EXT:site_package/Resources/Private/Templates/Layouts/Layout.html
2+
:caption: EXT:my_site_package/Resources/Private/Templates/Layouts/Layout.html
63
:linenos:
74

8-
<f:asset.css identifier="bootstrap" href="EXT:site_package/Resources/Public/Libaries/bootstrap-5.3.3-dist/css/bootstrap.min.css" />
9-
<f:asset.css identifier="main" href="EXT:site_package/Resources/Public/Css/main.css" />
5+
<f:asset.css identifier="bootstrap" href="EXT:my_site_package/Resources/Public/Libaries/bootstrap-5.3.3-dist/css/bootstrap.min.css" />
6+
<f:asset.css identifier="main" href="EXT:my_site_package/Resources/Public/Css/main.css" />
107
<main>
118
<f:render partial="Header" arguments="{_all}"/>
129
<f:render section="Main"/>
1310
<f:render partial="Footer" arguments="{_all}"/>
1411
</main>
15-
<f:asset.script identifier="bootstrap" src="EXT:site_package/Resources/Public/Libaries/bootstrap-5.3.3-dist/js/bootstrap.bundle.min.js" />
16-
<f:asset.script identifier="main" src="EXT:site_package/Resources/Public/JavaScript/main.js" />
12+
<f:asset.script identifier="bootstrap" src="EXT:my_site_package/Resources/Public/Libaries/bootstrap-5.3.3-dist/js/bootstrap.bundle.min.js" />
13+
<f:asset.script identifier="main" src="EXT:my_site_package/Resources/Public/JavaScript/main.js" />

‎Documentation/CodeSnippets/codesnippets.php‎

Lines changed: 0 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -95,13 +95,6 @@
9595
'caption' => 'EXT:site_package/Resources/Private/Templates/Partials/Jumbotron.html',
9696
'showLineNumbers' => true
9797
],
98-
[
99-
'action' => 'createCodeSnippet',
100-
'sourceFile' => 'EXT:site_package/Resources/Private/Templates/Layouts/Layout.html',
101-
'targetFileName' => 'Fluid/Layout.rst.txt',
102-
'caption' => 'EXT:site_package/Resources/Private/Templates/Layouts/Layout.html',
103-
'showLineNumbers' => true
104-
],
10598
[
10699
'action' => 'createCodeSnippet',
107100
'sourceFile' => 'EXT:site_package/Resources/Private/Templates/Partials/Header.html',

‎Documentation/FluidTemplates/Index.rst‎

Lines changed: 42 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ Copy the main :ref:`static HTML file <theme-example-static-html>` from
3535
:file:`Resources/Public/StaticTemplate/default.html`
3636
to :file:`Resources/Private/Templates/Pages/Default.html`. You can override
3737
the file created in step :ref:`Minimal site package - The TYPO3 Fluid
38-
version <t3sitepackage:minimal-extension-fluid>`. The file name must begin
38+
version <t3sitepackage:minimal-extension-fluid>`. The file name must begin
3939
with a capital letter
4040

4141
The template name `Default.html` is used as a fall back if no other template
@@ -87,7 +87,7 @@ Replace `<script>` tags in the body by using the
8787
:caption: Resources/Private/Templates/Pages/Default.html (difference)
8888

8989
The path to the assets will be resolved by TYPO3. `EXT:` tells TYPO3 that this is
90-
an extension path. `site_package` is the
90+
an extension path. `my_site_package` is the
9191
:ref:`Extension name defined in the composer.json <extension-configuration-composer>`.
9292

9393
Flush all caches and preview the page.
@@ -140,7 +140,7 @@ Remove the header from the template and replace it with a render ViewHelper:
140140
:caption: Resources/Private/Templates/Pages/Default.html (difference)
141141

142142
Move the Fluid code you just remove to a file called
143-
:file:`sitepackage/Resources/Private/Templates/Partials/Header.html`.
143+
:file:`my-site-package/Resources/Private/Templates/Partials/Header.html`.
144144

145145
Do the same with the jumbotron, the breadcrumb, and the footer.
146146

@@ -150,18 +150,18 @@ You should now have the following files:
150150
:level: 3
151151
:show-file-icons: true
152152

153-
* EXT:my_sitepackage/Resources/Private/Templates
153+
* EXT:my_site_package/Resources/Private/Templates
154154

155-
* Pages
155+
* Pages
156156

157-
* Default.html
158-
* Subpage.html
157+
* Default.html
158+
* Subpage.html
159159

160-
* Partials
160+
* Partials
161161

162-
* Footer.html
163-
* Header.html
164-
* Jumbotron.html
162+
* Footer.html
163+
* Header.html
164+
* Jumbotron.html
165165

166166
The Fluid template :file:`Resources/Private/Templates/Pages/Default.html`
167167
should now look like this:
@@ -181,14 +181,31 @@ the partial :file:`Resources/Private/Templates/Partials/Header.html` to its
181181
own partial, :file:`Resources/Private/Templates/Partials/Navigation/Menu.html`:
182182

183183
.. literalinclude:: _codesnippets/_remove_menu_from_header.diff
184-
:caption: EXT:site_package/Resources/Private/Templates/Partials/Header.html (Difference)
184+
:caption: EXT:my_site_package/Resources/Private/Templates/Partials/Header.html (Difference)
185185

186186
The :ref:`Render ViewHelper <f:render> <t3viewhelper:typo3-fluid-render>` is used
187187
the same like from within the template.
188188

189189
Chapter :ref:`Main menu <t3sitepackage:main-menu-creation>` will teach you how
190190
to make the menu work.
191191

192+
.. _create_partial_footer_menu:
193+
194+
Extract the footer menu into a partial
195+
-------------------------------
196+
197+
We can also move the footer menu from
198+
the partial :file:`Resources/Private/Templates/Partials/Footer.html` to its
199+
own partial, :file:`Resources/Private/Templates/Partials/Navigation/FooterMenu.html`:
200+
201+
.. literalinclude:: _codesnippets/_remove_menu_from_footer.diff
202+
:caption: EXT:my_site_package/Resources/Private/Templates/Partials/Footer.html (Difference)
203+
204+
The footer menu partial looks like this:
205+
206+
.. literalinclude:: _codesnippets/_FooterMenuPartial.html
207+
:caption: Resources/Private/Templates/Partials/Navigation/FooterMenu.html
208+
192209
.. _create_section:
193210

194211
Move the content into a section
@@ -223,6 +240,19 @@ We can repeat the above steps for the subpage and write such a template:
223240
:linenos:
224241
:emphasize-lines: 1-9
225242

243+
.. _create_partial_breadcrumb:
244+
245+
Extract the breadcrumb into a partial
246+
-------------------------------------
247+
248+
The subpage template contain a breadcrumb, between jumbotron and content, that
249+
you can also move to a partial.
250+
251+
The breadcrum partial looks like this:
252+
253+
.. literalinclude:: _codesnippets/_BreadcrumbPartial.html
254+
:caption: Resources/Private/Templates/Partials/Navigation/Breadcrumb.html
255+
226256
.. _the-website-layout-file:
227257

228258
Extract the repeated part to a layout

‎Documentation/FluidTemplates/_codesnippets/_BreadcrumbPartial.html‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<div class="container">
2+
<nav aria-label="breadcrumb">
3+
<ol class="breadcrumb breadcrumb-chevron p-3 bg-body-tertiary">
4+
<li class="breadcrumb-item">
5+
<a class="link-body-emphasis fw-semibold text-decoration-none" href="#">Home</a>
6+
</li>
7+
<li class="breadcrumb-item">
8+
<a class="link-body-emphasis fw-semibold text-decoration-none" href="#">Library</a>
9+
</li>
10+
<li class="breadcrumb-item active" aria-current="page">
11+
Data
12+
</li>
13+
</ol>
14+
</nav>
15+
</div>

‎Documentation/FluidTemplates/_codesnippets/_DefaultWithPartials.html‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
<f:asset.css identifier="bootstrap" href="EXT:site_package/Resources/Public/Libaries/bootstrap-5.3.3-dist/css/bootstrap.min.css" />
2-
<f:asset.css identifier="main" href="EXT:site_package/Resources/Public/Css/main.css" />
1+
<f:asset.css identifier="bootstrap" href="EXT:my_site_package/Resources/Public/Libaries/bootstrap-5.3.3-dist/css/bootstrap.min.css" />
2+
<f:asset.css identifier="main" href="EXT:my_site_package/Resources/Public/Css/main.css" />
33
<main>
44
<f:render partial="Header" arguments="{_all}"/>
55
<f:render partial="Jumbotron" arguments="{records: content.jumbotron.records}"/>
@@ -9,5 +9,5 @@ <h2>Start page content</h2>
99
</div>
1010
<f:render partial="Footer" arguments="{_all}"/>
1111
</main>
12-
<f:asset.script identifier="bootstrap" src="EXT:site_package/Resources/Public/Libaries/bootstrap-5.3.3-dist/js/bootstrap.bundle.min.js" />
13-
<f:asset.script identifier="main" src="EXT:site_package/Resources/Public/JavaScript/main.js" />
12+
<f:asset.script identifier="bootstrap" src="EXT:my_site_package/Resources/Public/Libaries/bootstrap-5.3.3-dist/js/bootstrap.bundle.min.js" />
13+
<f:asset.script identifier="main" src="EXT:my_site_package/Resources/Public/JavaScript/main.js" />

‎Documentation/FluidTemplates/_codesnippets/_DefaultWithSection.html‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
1-
<f:asset.css identifier="bootstrap" href="EXT:site_package/Resources/Public/Libaries/bootstrap-5.3.3-dist/css/bootstrap.min.css" />
2-
<f:asset.css identifier="main" href="EXT:site_package/Resources/Public/Css/main.css" />
1+
<f:asset.css identifier="bootstrap" href="EXT:my_site_package/Resources/Public/Libaries/bootstrap-5.3.3-dist/css/bootstrap.min.css" />
2+
<f:asset.css identifier="main" href="EXT:my_site_package/Resources/Public/Css/main.css" />
33
<main>
44
<f:render partial="Header" arguments="{_all}"/>
55
<f:render section="Main"/>
66
<f:render partial="Footer" arguments="{_all}"/>
77
</main>
8-
<f:asset.script identifier="bootstrap" src="EXT:site_package/Resources/Public/Libaries/bootstrap-5.3.3-dist/js/bootstrap.bundle.min.js" />
9-
<f:asset.script identifier="main" src="EXT:site_package/Resources/Public/JavaScript/main.js" />
8+
<f:asset.script identifier="bootstrap" src="EXT:my_site_package/Resources/Public/Libaries/bootstrap-5.3.3-dist/js/bootstrap.bundle.min.js" />
9+
<f:asset.script identifier="main" src="EXT:my_site_package/Resources/Public/JavaScript/main.js" />
1010

1111
<f:section name="Main">
1212
<f:render partial="Jumbotron" arguments="{records: content.jumbotron.records}"/>

‎Documentation/FluidTemplates/_codesnippets/_FooterMenuPartial.html‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
<ul class="nav col-md-4 justify-content-end">
2+
<li class="nav-item"><a href="#" class="nav-link px-2 text-body-secondary">Data privacy</a></li>
3+
<li class="nav-item"><a href="#" class="nav-link px-2 text-body-secondary">Imprint</a></li>
4+
</ul>

‎Documentation/FluidTemplates/_codesnippets/_SubpageWithSection.html‎

Lines changed: 8 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,25 @@
1-
<f:asset.css identifier="bootstrap" href="EXT:site_package/Resources/Public/Libaries/bootstrap-5.3.3-dist/css/bootstrap.min.css" />
2-
<f:asset.css identifier="main" href="EXT:site_package/Resources/Public/Css/main.css" />
1+
<f:asset.css identifier="bootstrap" href="EXT:my_site_package/Resources/Public/Libaries/bootstrap-5.3.3-dist/css/bootstrap.min.css" />
2+
<f:asset.css identifier="main" href="EXT:my_site_package/Resources/Public/Css/main.css" />
33
<main>
44
<f:render partial="Header" arguments="{_all}"/>
55
<f:render section="Main"/>
66
<f:render partial="Footer" arguments="{_all}"/>
77
</main>
8-
<f:asset.script identifier="bootstrap" src="EXT:site_package/Resources/Public/Libaries/bootstrap-5.3.3-dist/js/bootstrap.bundle.min.js" />
9-
<f:asset.script identifier="main" src="EXT:site_package/Resources/Public/JavaScript/main.js" />
8+
<f:asset.script identifier="bootstrap" src="EXT:my_site_package/Resources/Public/Libaries/bootstrap-5.3.3-dist/js/bootstrap.bundle.min.js" />
9+
<f:asset.script identifier="main" src="EXT:my_site_package/Resources/Public/JavaScript/main.js" />
1010

1111
<f:section name="Main">
1212
<f:render partial="Jumbotron" arguments="{_all}"/>
1313
<f:render partial="Navigation/Breadcrumb" arguments="{_all}"/>
1414
<div class="container">
1515
<div class="row">
1616
<div class="col-md-8">
17-
<div class="h-100 p-5 text-bg-white">
18-
<h2>Page content</h2>
19-
<p>The content of each page can be displayed here. </p>
20-
</div>
17+
<h2>Main page content (2/3)</h2>
18+
<p>The main content of each page can be displayed here.</p>
2119
</div>
2220
<div class="col-md-4">
23-
<div class="h-100 p-5 bg-body-tertiary">
24-
<h2>Sidebar </h2>
25-
<p>Place for some shared content</p>
26-
</div>
21+
<h2>Sidebar page content (1/3)</h2>
22+
<p>The sidebar content of each page can be displayed here. </p>
2723
</div>
2824
</div>
2925
</div>

‎Documentation/FluidTemplates/_codesnippets/_assets.diff‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
1-
+ <f:asset.css identifier="bootstrap" href="EXT:site_package/Resources/Public/Libaries/bootstrap-5.3.3-dist/css/bootstrap.min.css" />
2-
+ <f:asset.css identifier="main" href="EXT:site_package/Resources/Public/Css/main.css" />
1+
+ <f:asset.css identifier="bootstrap" href="EXT:my_site_package/Resources/Public/Libaries/bootstrap-5.3.3-dist/css/bootstrap.min.css" />
2+
+ <f:asset.css identifier="main" href="EXT:my_site_package/Resources/Public/Css/main.css" />
33
<main>
44
...
55
</main>
66
- <script src="../Libaries/bootstrap-5.3.3-dist/js/bootstrap.bundle.min.js"></script>
77
- <script src="../JavaScript/main.js"></script>
8-
+ <f:asset.script identifier="bootstrap" src="EXT:site_package/Resources/Public/Libaries/bootstrap-5.3.3-dist/js/bootstrap.bundle.min.js" />
9-
+ <f:asset.script identifier="main" src="EXT:site_package/Resources/Public/JavaScript/main.js" />
8+
+ <f:asset.script identifier="bootstrap" src="EXT:my_site_package/Resources/Public/Libaries/bootstrap-5.3.3-dist/js/bootstrap.bundle.min.js" />
9+
+ <f:asset.script identifier="main" src="EXT:my_site_package/Resources/Public/JavaScript/main.js" />

‎Documentation/FluidTemplates/_codesnippets/_include_layout.diff‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
1-
-<f:asset.css identifier="bootstrap" href="EXT:site_package/Resources/Public/Libaries/bootstrap-5.3.3-dist/css/bootstrap.min.css" />
2-
-<f:asset.css identifier="main" href="EXT:site_package/Resources/Public/Css/main.css" />
1+
-<f:asset.css identifier="bootstrap" href="EXT:my_site_package/Resources/Public/Libaries/bootstrap-5.3.3-dist/css/bootstrap.min.css" />
2+
-<f:asset.css identifier="main" href="EXT:my_site_package/Resources/Public/Css/main.css" />
33
-<main>
44
- <f:render partial="Header" arguments="{_all}"/>
55
- <f:render section="Main"/>
66
- <f:render partial="Footer" arguments="{_all}"/>
77
-</main>
8-
-<f:asset.script identifier="bootstrap" src="EXT:site_package/Resources/Public/Libaries/bootstrap-5.3.3-dist/js/bootstrap.bundle.min.js" />
9-
-<f:asset.script identifier="main" src="EXT:site_package/Resources/Public/JavaScript/main.js" />
8+
-<f:asset.script identifier="bootstrap" src="EXT:my_site_package/Resources/Public/Libaries/bootstrap-5.3.3-dist/js/bootstrap.bundle.min.js" />
9+
-<f:asset.script identifier="main" src="EXT:my_site_package/Resources/Public/JavaScript/main.js" />
1010
+<f:layout name="Layout"/>
1111
<f:section name="Main">
1212
...

0 commit comments

Comments
 (0)