Eine Sidebar

Dieser Beitrag beschreibt die Implementierung der rechts dargestellten Sidebar, die bei kleinen Bildschirmgeometrien unterhalb des Beitrags platziert wird.

Der aside Tag

<aside> ist in der offiziellen HTML-Markup-Beschreibung für »nicht unmittelbar dem Inhalt der Seite zugehörigem Content« vorgesehen. Dort werden Werbung, Randbemerkungen und Seitenverweise abgelegt. Die Suchmaschinen werten die Inhalte entsprechend aus.

Die Layout-Vorlage

Im Verzeichnis src/_layouts` befinden sich die Vorlagen für die Seitengestaltung. Für die Blog-Einträge ist folgendes formuliert:

<main>
  <header class="post">
  	 <section> <h1> <%= resource.data.title %> </h1> </section>
  </header>
  <wrapper>
  	<article class="article">
  	<%= yield %>
  	</article>
  	<aside>
  		<%= render Sidebar.new posts: collections.posts.resources,
                                   resource: resource %>
  	</aside>
  </wrapper>
</main>

Nach dem Header wird der Inhalt eingefügt. Der Text geht in den Tag <article>, die Verweise in den Tag <aside>. Beide werden mit einem <wrapper> zusammengehalten.

Die Sidebar-Komponente

Die Komponente wird mit der Liste der Blogbeiträge (Parameter posts) initialisiert. Der HTML-Teil kann über die Instanz-Variable @posts auf die Beiträge zugreifen.
Sie werden als Liste (ul-Tag) ausgegeben

<nav aria-label="Blog Articles">
  <h3> Aktuelle Blogbeiträge </h3>
  <ul role="list">
  <% @posts[0..5].each do | page |   %>
    <li>
      <sl-card class="card-header">
           <a href="<%= page.relative_url %>"> <%= page.data.title %> </a>
           <small><%= page.data.preamble[0 .. 75]  %> ...</small>
      </sl-card>
   </li>
  <% end %>
  </ul>
</nav>

Formatierung der Komponente

Ebenfalls im Ordner src/_components findet sich die Datei sidebar.css. Dort kann die Darstellung der Komponente definiert werden. Die Standard-CSS-Definitionen sind allerdings bei der Verwendung von <sl-card> Shoelace-Komponenten ausreichend.

Einzig die Platzierung der Cards auf kleinen Bildschirmdiagonalen muss geregelt werden.

Hierzu wird das <wrapper>-Element als Grid definiert, mit den beiden Tags: <article> und <aside> als Grid-Elemente. Diese werden bei großen Bildschirmdiagonalen nebeneinander und auf mobilen Geräten untereinander dargestellt.

Die Liste der Blogbeiträge wird als Flexbox definiert. In der Desktop-Version ist der Platz für die Liste gerade für ein Element ausreichend. Die Cards werden untereinander platziert. Auf kleinen Bilddiagonalen wird der zur Verfügung stehende Platz bestmöglich ausgefüllt.

body.post main wrapper  {  /* wrapper als Grid benutzen            */
    display: grid;
    grid-template-columns: minmax(0, 2.5fr) 1fr;
    max-width: calc(var(--max-content-width) + 2.25rem);
    }

	& aside nav ul {
		display: flex;         /* Liste mit Flexbox ausgeeben           */
		flex-wrap: wrap;
		& li {                 /* Minimale Größe der Elemente festlegen */
			flex: 1 350px;
		}
	}
}

Mit nur wenigen CSS-Befehlen gelingt so eine dem Anzeigegerät angepasste Darstellung.