84.155.186.41: /* Beispiel für Repeater Matrix */

2020-07-20T10:14:28Z

Beispiel für Repeater Matrix

84.155.186.41: Die Seite wurde neu angelegt: „== Links == https://processwire.com/talk/topic/7297-one-page-websites/ == Strategien == * Kindseiten um Sections zu erstellen * Repatermatrix o.ä. könne…“

2020-07-20T10:12:59Z

Die Seite wurde neu angelegt: „== Links == https://processwire.com/talk/topic/7297-one-page-websites/ == Strategien == * Kindseiten um Sections zu erstellen * Repatermatrix o.ä. könne…“

Neue Seite

== Links ==

https://processwire.com/talk/topic/7297-one-page-websites/

== Strategien ==

* Kindseiten um Sections zu erstellen
* Repatermatrix o.ä. können zu Sections werden

== Navigation erstellen ==
* Smooth Scroll nutzen (sieht einfach besser aus und hilft bei der Orientierung.
* Klasse in CSS Editor wenn nicht alle Links Smooth Scroll Links werden sollen
* Klasse in Navigation

=== Beispiel für Repeater Matrix ===
Wir nutzen ein Feld ''nav_title'' für jedes Repeater Matrix Item. Ist dieses ausgefüllt erstellen wir einen Navigationspunkt.
Als ID / Name für jede Section nutzen wir einfach die ID des RepeaterMatrix Items mit dem Buchstaben p als Prefix.
'''nav_hashNav.php'''
<syntaxhighlight lang="php">
<?php namespace ProcessWire;
$mainMenuMarkup = '';
$activeClass='';
$homePage = $pages->get("/");
$navItems = $homePage->and($homePage->children('menu.id=1'));
$mainMenuMarkup .= '<ul class="nav">';
foreach ($navItems as $navItem){
$itemMarkup='';
$hashNav='';
// Current Page ?
if($navItem->id == $page->id){
$activeClass = ($navItem->id == $page->id) ? " active" : "";
$hashNavItems = getHashNavItems($navItem);
$hashNav = renderHashNav($hashNavItems);
}
$itemMarkup = '
<li class="nav-item">
<a class="nav-link '.$activeClass.'" href="'.$navItem->url.'"> '. $navItem->title.'</a>
'.$hashNav.'
</li>
';
$mainMenuMarkup .= $itemMarkup;
}
$mainMenuMarkup .= '</ul>';

// HASH NAVI FUNCTIONS
// If Hash-Links on actual page use them as subnav
// Hashes are created when field nav_title in layout_blocks is filled
// caching (i.e proCache) is recommended

function getHashNavItems($p){
$navItems = array(); // pid=>title
foreach($p->layout_blocks as $lb){
if($navTitle = $lb->nav_title) $navItems[] = array('pid'=>$lb->id, 'title' => $lb->nav_title);
}
if( !empty($navItems) ){
return $navItems;
}else return false;
}
function renderHashNav($subnavItems){
$out='';
if(!empty($subnavItems)){
$out .= '<ul class="nav nav-v npl nml">';
foreach($subnavItems as $item){
$out .= '<li><a class="scroll" href="#p'.$item['pid'].'">'.$item['title'].'</a></li>';
}
$out .= '</ul>';
}
return $out;
}
?>
</syntaxhighlight>

'''SmoothScroll JS'''
<syntaxhighlight lang="javascript">
$(document).on('click', 'a.scroll', function (event) {
event.preventDefault();
$('html, body').animate({
scrollTop: $($.attr(this, 'href')).offset().top
}, 100);
});
</syntaxhighlight>

Smooth Scroll wird mittlerweile auch von vielen Browsern direkt unterstützt. Mit der scroll-behaviour Eigenschaft kann man es aktivieren.

'''SmoothScroll (CSS)'''
<syntaxhighlight lang="css">
html,body{
min-height: 100%;
height: 100%;
}
html{
scroll-behavior: smooth;
}
</syntaxhighlight>

@@ Zeile 16: / Zeile 16: @@
 Wir nutzen ein Feld ''nav_title'' für jedes Repeater Matrix Item. Ist dieses ausgefüllt erstellen wir einen Navigationspunkt.
 Als ID / Name für jede Section nutzen wir einfach die ID des RepeaterMatrix Items mit dem Buchstaben p als Prefix.
 '''nav_hashNav.php'''
 <syntaxhighlight lang="php">

ProcessWire - One Page Website - Versionsgeschichte

84.155.186.41: /* Beispiel für Repeater Matrix */

84.155.186.41: Die Seite wurde neu angelegt: „== Links == https://processwire.com/talk/topic/7297-one-page-websites/ == Strategien == * Kindseiten um Sections zu erstellen * Repatermatrix o.ä. könne…“