neue Komponente für Artikellisten. Möglichkeit, Artikel Seiten zuzuweisen.

api/collections/articles.yml

@@ -35,6 +35,22 @@ meta:
               - article.general.sort
               - source: article.general.locale
                 type: flag
+    #  Filter Navigation-Items in Collection-Navigation
+    navigationFilter:
+        - label: { de: "News", en: "News" }
+          mdiIcon: filter-outline
+          params:
+              - sort: article.general.sort
+              # - s.article.general.public: true
+              - w.article.content.title: lor
+              - s.article.general.locale: de
+        - label: { de: "Diam", en: "Diam" }
+          mdiIcon: filter-outline
+          params:
+              - sort: article.general.sort
+              - s.article.general.public: true
+              - w.article.content.title: diam
+              - s.article.general.locale: de
 
 imageFilter:
     xs:

api/collections/fields/_article.yml

@@ -5,7 +5,7 @@ meta:
     label:
         de: Einstellungen zum Artikel
         en: Article Setings
-    activeTab: 1
+    activeTab: 0
 subFields:
     - name: general
       type: object
@@ -25,6 +25,43 @@ subFields:
                     de: "Der Artikel wird auf der Seite angezeigt."
                     en: "This article is displayed on the page."
           - !include _locale.yml
+          - name: tags
+            type: string[]
+            meta:
+                helperText:
+                    de: "Über die Zuweisung von Schlagworten, können Artikel kategorisiert werden."
+                    en: "Articles can be categorized by assigning keywords."
+                widget: chipArray
+                label:
+                    de: Schlagworte / Tags / Labels
+                    en: Linking Tags
+                addAllowed: true
+                defaultValue: []
+                choices:
+                    endpoint: "tags"
+                    mapping:
+                        id: "name"
+                        name: "name"
+                    params:
+                        sort: "name"
+          - name: pages
+            type: string[]
+            meta:
+                helperText:
+                    de: "Zuordnung zu Seiten"
+                    en: "Assignment to Pages"
+                widget: chipArray
+                label:
+                    de: Seiten
+                    en: Pages
+                defaultValue: []
+                choices:
+                    endpoint: "content"
+                    mapping:
+                        id: "id"
+                        name: "path"
+                    params:
+                        sort: "path"
           - name: publish_date
             type: object
             meta:
@@ -63,25 +100,6 @@ subFields:
                       helperText:
                           de: "Der Zeit-Interval wird in ms (Millisekunden) angebeben. Standard ist 60000 (60sec)"
                           en: "The time interval is specified in ms (milliseconds). Default is 60000 (60sec)"
-          - name: tags
-            type: string[]
-            meta:
-                helperText:
-                    de: "Über die Zuweisung von Schlagworten, können Artikel kategorisiert werden."
-                    en: "Articles can be categorized by assigning keywords."
-                widget: chipArray
-                label:
-                    de: Schlagworte / Tags / Labels
-                    en: Linking Tags
-                addAllowed: true
-                defaultValue: []
-                choices:
-                    endpoint: "tags"
-                    mapping:
-                        id: "id"
-                        name: "name"
-                    params:
-                        sort: "name"
           - name: sort
             type: number
             meta:

src/components/App.svelte

@@ -66,8 +66,7 @@
         <Home />
     </Route>
     <Route path="/*path" let:params>
-        <!-- <Content path="{params.path}" /> -->
+        <Content path="{params.path}" />
-        <ArticleDetails path="{params.path}" />
     </Route>
 </Router>
 

src/components/routes/Home.svelte

@@ -9,28 +9,16 @@
     import ContactForm from "../widgets/ContactForm.svelte"
     import GeneralMediaImage from "../widgets/GeneralMediaImage.svelte"
     import Article from "../widgets/Article.svelte"
+    import ArticlesList from "../widgets/ArticlesList.svelte"
 
     let expandedForm: string = "recipe"
-    let articleEntries: CollectionEntry[] = []
-
-    $: if ($currentLang) {
-        getArticles("articles", {
-            filter: {
-                "article.general.locale": $currentLang,
-            },
-        }).then((response) => {
-            articleEntries = response
-        })
-    }
 </script>
 
 <section class="contact">
     <div class="container">
         <div class="row">
             <div class="col-md-12">
-                {#each articleEntries || [] as entry}
+                <ArticlesList tag="home" />
-                    <Article entry="{entry}" />
-                {/each}
             </div>
         </div>
         <div class="row">

src/components/widgets/ArticlesList.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+    import { currentLang } from "../../store"
+    import { getArticles } from "../../api"
+
+    import Article from "../widgets/Article.svelte"
+
+    export let tag: string
+
+    let articleEntries: CollectionEntry[] = []
+
+    $: if ($currentLang) {
+        getArticles("articles", {
+            filter: {
+                "article.general.locale": $currentLang,
+                "article.general.tags": { $in: [tag] },
+            },
+        }).then((response) => {
+            articleEntries = response
+        })
+    }
+</script>
+
+{#each articleEntries || [] as entry}
+    <Article entry="{entry}" />
+{/each}

types/global.d.ts

@@ -16,7 +16,9 @@ interface CollectionEntry {
 }
 
 interface ContentBlock {
-    article: any
+    article: {
+        [key: string]: any
+    }
 }
 
 interface Content {