ArticleDetails page vorbereitet.

api/collections/fields/_article.yml

@@ -98,7 +98,6 @@ subFields:
           label:
               de: Inhalt
               en: Content
-          css:
       subFields:
           - name: slug
             type: string

src/components/App.svelte

@@ -6,6 +6,7 @@
 
     import Home from "./routes/Home.svelte"
     import Content from "./routes/Content.svelte"
+    import ArticleDetails from "./routes/ArticleDetails.svelte"
 
     import Header from "./widgets/Header.svelte"
     import Footer from "./widgets/Footer.svelte"
@@ -65,7 +66,8 @@
         <Home />
     </Route>
     <Route path="/*path" let:params>
-        <Content path="{params.path}" />
+        <!-- <Content path="{params.path}" /> -->
+        <ArticleDetails path="{params.path}" />
     </Route>
 </Router>
 

src/components/routes/ArticleDetails.svelte

@@ -2,15 +2,23 @@
     import { currentLang } from "../../store"
     import { getArticles } from "../../api"
 
-    // import Article from "../widgets/Article.svelte"
+    import Article from "../widgets/Article.svelte"
+
+    export let path: string
+
+    let articleEntries: CollectionEntry[] = []
 
     $: if ($currentLang) {
+        let urlParts = path.split("/")
+        let slug = urlParts[urlParts.length - 1]
+
         getArticles("articles", {
             filter: {
                 "article.general.locale": $currentLang,
+                "article.content.slug": slug,
             },
         }).then((response) => {
-            console.log(response)
+            articleEntries = response
         })
     }
 </script>
@@ -18,7 +26,9 @@
 <div class="container">
     <div class="row">
         <div class="col-md-12">
-            <h1>ARTICLE DETAILS</h1>
+            {#each articleEntries || [] as entry}
+                <Article entry="{entry}" />
+            {/each}
         </div>
     </div>
 </div>