156 lines
9 KiB
PHP
156 lines
9 KiB
PHP
<?php
|
||
|
||
use App\Models\CmsArticle;
|
||
use App\Models\CmsProject;
|
||
use FluxCms\Core\Models\CmsContent;
|
||
use FluxCms\Core\Models\CmsMedia;
|
||
use function Livewire\Volt\{layout, title, computed};
|
||
|
||
layout('components.layouts.app');
|
||
title('CMS Dashboard');
|
||
|
||
$stats = computed(fn () => [
|
||
'contents' => CmsContent::count(),
|
||
'groups' => CmsContent::distinct()->pluck('group')->count(),
|
||
'projects' => CmsProject::count(),
|
||
'projects_published' => CmsProject::published()->count(),
|
||
'articles' => CmsArticle::count(),
|
||
'articles_published' => CmsArticle::published()->count(),
|
||
'media' => CmsMedia::count(),
|
||
]);
|
||
|
||
?>
|
||
|
||
<div>
|
||
<div class="mb-6">
|
||
<flux:heading size="xl">CMS</flux:heading>
|
||
<flux:text class="mt-1">Inhalte, Projekte und Medien verwalten.</flux:text>
|
||
</div>
|
||
|
||
<div class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
|
||
<a href="{{ route('cms.content.index') }}" wire:navigate>
|
||
<flux:card class="hover:border-blue-500 transition-colors">
|
||
<div class="flex items-center gap-3">
|
||
<flux:icon name="document-text" class="text-blue-500" />
|
||
<div>
|
||
<flux:heading size="lg">{{ $this->stats['contents'] }}</flux:heading>
|
||
<flux:text class="text-sm">Inhalte in {{ $this->stats['groups'] }} Gruppen</flux:text>
|
||
</div>
|
||
</div>
|
||
</flux:card>
|
||
</a>
|
||
|
||
<a href="{{ route('cms.projects.index') }}" wire:navigate>
|
||
<flux:card class="hover:border-emerald-500 transition-colors">
|
||
<div class="flex items-center gap-3">
|
||
<flux:icon name="building-office" class="text-emerald-500" />
|
||
<div>
|
||
<flux:heading size="lg">{{ $this->stats['projects'] }}</flux:heading>
|
||
<flux:text class="text-sm">Projekte ({{ $this->stats['projects_published'] }} veröffentlicht)</flux:text>
|
||
</div>
|
||
</div>
|
||
</flux:card>
|
||
</a>
|
||
|
||
<a href="{{ route('cms.articles.index') }}" wire:navigate>
|
||
<flux:card class="hover:border-amber-500 transition-colors">
|
||
<div class="flex items-center gap-3">
|
||
<flux:icon name="newspaper" class="text-amber-500" />
|
||
<div>
|
||
<flux:heading size="lg">{{ $this->stats['articles'] }}</flux:heading>
|
||
<flux:text class="text-sm">Magazin-Artikel ({{ $this->stats['articles_published'] }} veröffentlicht)</flux:text>
|
||
</div>
|
||
</div>
|
||
</flux:card>
|
||
</a>
|
||
|
||
<a href="{{ route('cms.media.index') }}" wire:navigate>
|
||
<flux:card class="hover:border-violet-500 transition-colors">
|
||
<div class="flex items-center gap-3">
|
||
<flux:icon name="photo" class="text-violet-500" />
|
||
<div>
|
||
<flux:heading size="lg">{{ $this->stats['media'] }}</flux:heading>
|
||
<flux:text class="text-sm">Medien</flux:text>
|
||
</div>
|
||
</div>
|
||
</flux:card>
|
||
</a>
|
||
</div>
|
||
|
||
<flux:card class="mt-6 max-w-4xl">
|
||
<flux:heading size="lg" class="mb-4">So funktioniert das CMS</flux:heading>
|
||
<div class="space-y-5 text-sm text-zinc-600 dark:text-zinc-400">
|
||
|
||
<div>
|
||
<flux:heading size="sm" class="mb-1 flex items-center gap-2">
|
||
<flux:icon name="squares-2x2" class="size-4 text-zinc-500" />
|
||
Aufbau & Navigation
|
||
</flux:heading>
|
||
<p>
|
||
Das CMS ist die zentrale Stelle, um alle Inhalte der öffentlichen Website zu pflegen.
|
||
Es gliedert sich in vier Module, die Sie über die Kacheln oben erreichen:
|
||
</p>
|
||
<ul class="mt-2 ml-5 list-disc space-y-1">
|
||
<li><strong class="font-medium text-zinc-800 dark:text-zinc-200">Inhalte</strong> – Texte, Abschnitte und strukturierte Daten der Website (z. B. Startseite, Netzwerk, rechtliche Texte). Inhalte sind in <em>Gruppen</em> organisiert, sodass zusammengehörige Felder gebündelt bearbeitet werden können.</li>
|
||
<li><strong class="font-medium text-zinc-800 dark:text-zinc-200">Projekte</strong> – Immobilien-Referenzobjekte mit Bildern, Preisen und Beschreibungen. Jedes Projekt kann als Entwurf angelegt und später veröffentlicht werden.</li>
|
||
<li><strong class="font-medium text-zinc-800 dark:text-zinc-200">Magazin</strong> – Redaktionelle Artikel (z. B. über Dubai-Immobilien, Supply-Chain oder Einrichtung). Artikel unterstützen Kategorien, Autoren und Lesezeiten.</li>
|
||
<li><strong class="font-medium text-zinc-800 dark:text-zinc-200">Medien</strong> – Zentrale Bild- und Dateiverwaltung. Alle Uploads landen hier und können in jedem Modul wiederverwendet werden.</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<flux:separator />
|
||
|
||
<div>
|
||
<flux:heading size="sm" class="mb-1 flex items-center gap-2">
|
||
Medienbibliothek & Bildfelder
|
||
</flux:heading>
|
||
<p>
|
||
Jede Datei, die auf der Website erscheint, wird in der <strong class="font-medium text-zinc-800 dark:text-zinc-200">Medienbibliothek</strong> verwaltet.
|
||
Sie haben zwei Wege, Dateien hochzuladen:
|
||
</p>
|
||
<ol class="mt-2 ml-5 list-decimal space-y-1">
|
||
<li><strong class="font-medium text-zinc-800 dark:text-zinc-200">Vorab</strong> – Im Modul „Medien" Dateien hochladen, mit Titel und Alt-Text versehen und organisieren.</li>
|
||
<li><strong class="font-medium text-zinc-800 dark:text-zinc-200">Im Kontext</strong> – Beim Bearbeiten eines Inhalts, Projekts oder Artikels auf „Bild auswählen" klicken. Im Auswahldialog können Sie ein bestehendes Medium wählen <em>oder</em> per Drag-and-drop direkt hochladen. Dieser Schnell-Upload wird automatisch in der Medienbibliothek gespeichert.</li>
|
||
</ol>
|
||
<p class="mt-2">
|
||
Egal welchen Weg Sie wählen: Es gibt immer einen zentralen Bibliothekseintrag. So behalten Sie den Überblick und können dasselbe Bild an mehreren Stellen einsetzen.
|
||
</p>
|
||
</div>
|
||
|
||
<flux:separator />
|
||
|
||
<div>
|
||
<flux:heading size="sm" class="mb-1 flex items-center gap-2">
|
||
<flux:icon name="document-text" class="size-4 text-blue-500" />
|
||
Inhalte bearbeiten
|
||
</flux:heading>
|
||
<p>
|
||
Inhalte sind nach <strong class="font-medium text-zinc-800 dark:text-zinc-200">Gruppen</strong> geordnet – z. B. <em>homepage</em>, <em>netzwerk</em>, <em>legal</em>.
|
||
Innerhalb einer Gruppe sehen Sie die einzelnen Felder (Texte, Rich-Text, Bilder oder JSON-Strukturen).
|
||
</p>
|
||
<ul class="mt-2 ml-5 list-disc space-y-1">
|
||
<li><strong class="font-medium text-zinc-800 dark:text-zinc-200">Mehrsprachigkeit:</strong> Wo mehrere Sprachen vorgesehen sind, wählen Sie die gewünschte Sprache (DE / EN) im Editor. Jede Sprachversion wird einzeln gespeichert.</li>
|
||
<li><strong class="font-medium text-zinc-800 dark:text-zinc-200">Sofort live:</strong> Gespeicherte Änderungen erscheinen auf der öffentlichen Website, sobald die jeweilige Seite den entsprechenden CMS-Key einbindet – ein zusätzliches „Veröffentlichen" ist nicht nötig.</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<flux:separator />
|
||
|
||
<div>
|
||
<flux:heading size="sm" class="mb-1 flex items-center gap-2">
|
||
<flux:icon name="building-office" class="size-4 text-emerald-500" />
|
||
Projekte & Magazin verwalten
|
||
</flux:heading>
|
||
<p>
|
||
Projekte und Magazin-Artikel sind eigenständige Einträge mit eigenem Lebenszyklus:
|
||
</p>
|
||
<ul class="mt-2 ml-5 list-disc space-y-1">
|
||
<li><strong class="font-medium text-zinc-800 dark:text-zinc-200">Entwurf / Veröffentlicht:</strong> Neue Einträge starten als Entwurf. Erst nach dem Veröffentlichen sind sie auf der Website sichtbar. Sie können Einträge jederzeit wieder auf „Entwurf" setzen, um sie temporär auszublenden.</li>
|
||
<li><strong class="font-medium text-zinc-800 dark:text-zinc-200">Reihenfolge:</strong> Über das Sortierfeld steuern Sie, in welcher Reihenfolge Projekte und Artikel auf der Website erscheinen (z. B. Portfolio-Listen, Magazin-Übersicht).</li>
|
||
<li><strong class="font-medium text-zinc-800 dark:text-zinc-200">Bilder:</strong> Projekt- und Artikelbilder werden über die Medienauswahl zugeordnet (siehe oben).</li>
|
||
</ul>
|
||
</div>
|
||
|
||
</div>
|
||
</flux:card>
|
||
</div>
|