Möglichkeit, in die Artikel-Details zu springen implementiert, ohne einen extra URL Pfad zu benötigen.

api/collections/articles.yml

@@ -114,10 +114,6 @@ permissions:
 #         update:
 #             type: javascript
 #             file: hooks/article/put_return.js
-#     delete:
-#         return:
-#             type: javascript
-#             file: hooks/article/delete_return.js
 
 fields:
-    - !include fields/_article.yml
+    - !include fields/article/_article.yml

api/collections/fields/article/_article.yml

@@ -24,7 +24,7 @@ subFields:
                 helperText:
                     de: "Der Artikel wird auf der Seite angezeigt."
                     en: "This article is displayed on the page."
-          - !include _locale.yml
+          - !include ../_locale.yml
           - name: tags
             type: string[]
             meta:

src/components/routes/Content.svelte

@@ -1,17 +1,19 @@
 <script lang="ts">
     import { _ } from "svelte-i18n"
-    import { getContent } from "../../api"
+    import { getContent, getArticles } from "../../api"
     import { generalInfo, currentLang, location } from "../../store"
     import { navigate } from "svelte-routing"
 
     import Image from "../widgets/Image.svelte"
     import ArticlesList from "../widgets/ArticlesList.svelte"
-    // import Article from "../widgets/Article.svelte"
+    import Article from "../widgets/Article.svelte"
 
     export let path: string
+    let oldPath: string = null
 
     let loading = true
     let content: Content
+    let article: TibiArticle
     let connectedContentNotFound: boolean = false
     $: currentDomain = window.location.protocol + "//" + window.location.host
 
@@ -40,6 +42,7 @@
         let apiParams: APIParams = {
             filter,
         }
+
         loading = true
         getContent(apiParams)
             .then((c) => {
@@ -60,6 +63,8 @@
                     content = null
                 }
 
+                oldPath = path
+
                 // Redirect to HOME if no content has been found. So the page 404 content will never shown.
                 if (!content) {
                     navigate("/")
@@ -70,13 +75,59 @@
             })
     }
 
+    const loadArticle = (type?: string) => {
+        let pathParts = path.split("/")
+        let slug = pathParts[pathParts.length - 1]
+
+        // Set default API call filter
+        let filter = {
+            "article.general.locale": $currentLang,
+            "article.content.slug": slug,
+        }
+
+        // Changed filter to find simmilar content for changed language
+        if (type === "changedLanguage") {
+            // filter = {
+            //     tags: { $in: content?.tags },
+            //     locale: $currentLang,
+            // }
+            // delete filter["article.general.locale"]
+            // delete filter["article.content.slug"]
+        }
+
+        // Get content by API call
+        let apiParams: APIParams = {
+            filter,
+        }
+        loading = true
+        getArticles("articles", apiParams)
+            .then((respoonse) => {
+                article = respoonse[0]
+                oldPath = path
+            })
+            .finally(() => {
+                loading = false
+            })
+    }
+
     currentLang.subscribe(() => {
         if (content) {
             loadContent("changedLanguage")
+        } else if (article) {
+            loadArticle("changedLanguage")
         }
     })
 
-    $: if (path) loadContent()
+    $: if (path) {
+        content = null
+        article = null
+
+        if (window.location.pathname.endsWith("/")) {
+            loadContent()
+        } else {
+            loadArticle()
+        }
+    }
 </script>
 
 <svelte:head>
@@ -114,12 +165,9 @@
 
 {#if loading}
     <!-- Loader -->
+{:else if article}
+    <Article entry="{article}" showDetails />
 {:else if content}
-    <!-- 
-    {#each content.blocks || [] as b}
-        {JSON.stringify(b)}
-    {/each}
-    -->
     <ArticlesList path="{path}" tags="{content?.tags}" />
 {:else}
     <div class="page-404">

src/components/widgets/Article.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
-    import { fade } from "svelte/transition"
     import { _ } from "svelte-i18n"
-    // import { navigate } from "svelte-routing"
+    import { navigate, link } from "svelte-routing"
 
     import TibiArticleMediaFile from "./TibiArticleMediaFile.svelte"
 
@@ -9,6 +8,7 @@
     export let cssClass: string = ""
     export let showDetails: boolean = false
 
+    let path = window.location.pathname
     let article = null
     if (entry) {
         article = entry.article
@@ -201,6 +201,21 @@
 
                     {#if article?.content?.types?.details && showDetails}
                         <div class="article-details">{@html article?.content?.types?.details}</div>
+                    {:else if article?.content?.types?.details}
+                        <a
+                            use:link
+                            href="{`${path}${encodeURIComponent(
+                                article?.content?.slug
+                                    ? article?.content?.slug
+                                          .toLowerCase()
+                                          .replace(/[^a-zA-Z0-9]/g, '-')
+                                          .replaceAll('---', '--')
+                                    : entry.id
+                            )}`}"
+                            class="article-link"
+                        >
+                            {@html article?.link?.text ? article?.link?.text : $_("details")}
+                        </a>
                     {/if}
                 </div>
             </div>

src/components/widgets/Navigation.svelte

@@ -40,7 +40,7 @@
                     {item.settings.title}
                 </a>
             {:else}
-                <a href="{item.settings.page}" class:active="{'/' + item.settings.page === $location.path}">
+                <a href="{item.settings.page + '/'}" class:active="{'/' + item.settings.page === $location.path}">
                     {item.settings.title}
                 </a>
             {/if}
@@ -70,7 +70,7 @@
                 {:else}
                     <div class="nav-item">
                         <a
-                            href="{item.settings.page}"
+                            href="{item.settings.page + '/'}"
                             on:click="{() => (showMobileNav = false)}"
                             class:active="{'/' + item.settings.page === $location.path}"
                         >

src/css/theme-2022/components/article.less

@@ -22,6 +22,7 @@ article,
     }
 
     .article-link {
+        cursor: pointer;
         text-decoration: underline;
     }
 }