gbanyan/usher-manage-stack
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add headless CMS for official site content management

Browse Source 
Integrate article and page management into the Laravel admin dashboard
to serve as a headless CMS for the Next.js frontend (usher-site).

Backend:
- 7 migrations: article_categories, article_tags, articles, pivots, attachments, pages
- 5 models with relationships: Article, ArticleCategory, ArticleTag, ArticleAttachment, Page
- 4 admin controllers: articles (with publish/archive/pin), categories, tags, pages
- Admin views with EasyMDE markdown editor, multi-select categories/tags
- Navigation section "官網管理" in admin sidebar

API (v1):
- GET /api/v1/articles (filtered by type, category, tag, search; paginated)
- GET /api/v1/articles/{slug} (with related articles)
- GET /api/v1/categories
- GET /api/v1/pages/{slug} (with children)
- GET /api/v1/homepage (aggregated homepage data)
- Attachment download endpoint
- CORS configured for usher.org.tw, vercel.app, localhost:3000

Content migration:
- ImportHugoContent command: imports Hugo markdown files as articles/pages
- Successfully imported 27 articles, 17 categories, 11 tags, 9 pages

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
gbanyan
2026-02-07 11:58:22 +08:00
parent bfbec861d0
commit a30af8eaf7
45 changed files with 4816 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

242
resources/views/admin/articles/create.blade.php Normal file
View File

@@ -0,0 +1,242 @@
<x-app-layout>
<x-slot name="header">
<div class="flex items-center justify-between">
<h2 class="text-xl font-semibold leading-tight text-gray-800 dark:text-gray-200">
建立文章
</h2>
<a href="{{ route('admin.articles.index') }}" class="inline-flex items-center rounded-md border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 px-3 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700">
← 返回列表
</a>
</div>
</x-slot>
<div class="py-12">
<div class="mx-auto max-w-4xl sm:px-6 lg:px-8">
<div class="bg-white dark:bg-gray-800 shadow sm:rounded-lg">
<form method="POST" action="{{ route('admin.articles.store') }}" enctype="multipart/form-data" class="space-y-6 p-6">
@csrf
<!-- Title -->
<div>
<label for="title" class="block text-sm font-medium text-gray-700 dark:text-gray-300">標題 <span class="text-red-500">*</span></label>
<input type="text" name="title" id="title" value="{{ old('title') }}" required
class="mt-1 block w-full rounded-md border-gray-300 dark:border-gray-700 shadow-sm focus:border-indigo-500 dark:focus:border-indigo-600 focus:ring-indigo-500 dark:focus:ring-indigo-600 sm:text-sm dark:bg-gray-900 dark:text-gray-300"
placeholder="輸入文章標題">
@error('title')
<p class="mt-1 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
@enderror
</div>
<!-- Slug -->
<div>
<label for="slug" class="block text-sm font-medium text-gray-700 dark:text-gray-300">網址代碼（選填，自動產生）</label>
<input type="text" name="slug" id="slug" value="{{ old('slug') }}"
class="mt-1 block w-full rounded-md border-gray-300 dark:border-gray-700 shadow-sm focus:border-indigo-500 dark:focus:border-indigo-600 focus:ring-indigo-500 dark:focus:ring-indigo-600 sm:text-sm dark:bg-gray-900 dark:text-gray-300"
placeholder="my-article-slug">
@error('slug')
<p class="mt-1 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
@enderror
</div>
<!-- Content Type -->
<div>
<label for="content_type" class="block text-sm font-medium text-gray-700 dark:text-gray-300">文章類型 <span class="text-red-500">*</span></label>
<select name="content_type" id="content_type" required
class="mt-1 block w-full rounded-md border-gray-300 dark:border-gray-700 shadow-sm focus:border-indigo-500 dark:focus:border-indigo-600 focus:ring-indigo-500 dark:focus:ring-indigo-600 sm:text-sm dark:bg-gray-900 dark:text-gray-300">
<option value="blog" {{ old('content_type') === 'blog' ? 'selected' : '' }}>部落格</option>
<option value="notice" {{ old('content_type') === 'notice' ? 'selected' : '' }}>公告</option>
<option value="document" {{ old('content_type') === 'document' ? 'selected' : '' }}>文件</option>
<option value="related_news" {{ old('content_type') === 'related_news' ? 'selected' : '' }}>相關新聞</option>
</select>
@error('content_type')
<p class="mt-1 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
@enderror
</div>
<!-- Summary -->
<div>
<label for="summary" class="block text-sm font-medium text-gray-700 dark:text-gray-300">摘要（選填）</label>
<textarea name="summary" id="summary" rows="3"
class="mt-1 block w-full rounded-md border-gray-300 dark:border-gray-700 shadow-sm focus:border-indigo-500 dark:focus:border-indigo-600 focus:ring-indigo-500 dark:focus:ring-indigo-600 sm:text-sm dark:bg-gray-900 dark:text-gray-300"
placeholder="文章摘要，顯示於列表頁">{{ old('summary') }}</textarea>
@error('summary')
<p class="mt-1 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
@enderror
</div>
<!-- Content (Markdown Editor) -->
<div>
<label for="content" class="block text-sm font-medium text-gray-700 dark:text-gray-300">內容 <span class="text-red-500">*</span></label>
<textarea name="content" id="content" rows="15" required>{{ old('content') }}</textarea>
@error('content')
<p class="mt-1 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
@enderror
</div>
<!-- Featured Image -->
<div>
<label for="featured_image" class="block text-sm font-medium text-gray-700 dark:text-gray-300">精選圖片（選填）</label>
<input type="file" name="featured_image" id="featured_image" accept="image/*"
class="mt-1 block w-full text-sm text-gray-500 dark:text-gray-400 file:mr-4 file:py-2 file:px-4 file:rounded-md file:border-0 file:text-sm file:font-medium file:bg-indigo-50 dark:file:bg-indigo-900/50 file:text-indigo-700 dark:file:text-indigo-300 hover:file:bg-indigo-100 dark:hover:file:bg-indigo-900">
<p class="mt-1 text-xs text-gray-500 dark:text-gray-400">最大 5MB，支援 JPG, PNG, GIF, WebP</p>
@error('featured_image')
<p class="mt-1 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
@enderror
</div>
<!-- Featured Image Alt -->
<div>
<label for="featured_image_alt" class="block text-sm font-medium text-gray-700 dark:text-gray-300">圖片替代文字（選填）</label>
<input type="text" name="featured_image_alt" id="featured_image_alt" value="{{ old('featured_image_alt') }}"
class="mt-1 block w-full rounded-md border-gray-300 dark:border-gray-700 shadow-sm focus:border-indigo-500 dark:focus:border-indigo-600 focus:ring-indigo-500 dark:focus:ring-indigo-600 sm:text-sm dark:bg-gray-900 dark:text-gray-300"
placeholder="描述圖片內容（無障礙用途）">
</div>
<!-- Categories -->
<div>
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300">分類（選填）</label>
<div class="mt-2 space-y-2">
@foreach($categories as $category)
<label class="inline-flex items-center mr-4">
<input type="checkbox" name="categories[]" value="{{ $category->id }}"
{{ in_array($category->id, old('categories', [])) ? 'checked' : '' }}
class="h-4 w-4 rounded border-gray-300 dark:border-gray-700 text-indigo-600 focus:ring-indigo-500 dark:bg-gray-900">
<span class="ml-2 text-sm text-gray-700 dark:text-gray-300">{{ $category->name }}</span>
</label>
@endforeach
</div>
</div>
<!-- Tags -->
<div>
<label for="tags_input" class="block text-sm font-medium text-gray-700 dark:text-gray-300">標籤（選填，逗號分隔）</label>
<input type="text" name="tags_input" id="tags_input" value="{{ old('tags_input') }}"
class="mt-1 block w-full rounded-md border-gray-300 dark:border-gray-700 shadow-sm focus:border-indigo-500 dark:focus:border-indigo-600 focus:ring-indigo-500 dark:focus:ring-indigo-600 sm:text-sm dark:bg-gray-900 dark:text-gray-300"
placeholder="標籤1, 標籤2, 標籤3">
</div>
<!-- Author Name -->
<div>
<label for="author_name" class="block text-sm font-medium text-gray-700 dark:text-gray-300">作者名稱（選填）</label>
<input type="text" name="author_name" id="author_name" value="{{ old('author_name') }}"
class="mt-1 block w-full rounded-md border-gray-300 dark:border-gray-700 shadow-sm focus:border-indigo-500 dark:focus:border-indigo-600 focus:ring-indigo-500 dark:focus:ring-indigo-600 sm:text-sm dark:bg-gray-900 dark:text-gray-300"
placeholder="顯示於文章的作者名稱">
</div>
<!-- Access Level -->
<div>
<label for="access_level" class="block text-sm font-medium text-gray-700 dark:text-gray-300">存取權限 <span class="text-red-500">*</span></label>
<select name="access_level" id="access_level" required
class="mt-1 block w-full rounded-md border-gray-300 dark:border-gray-700 shadow-sm focus:border-indigo-500 dark:focus:border-indigo-600 focus:ring-indigo-500 dark:focus:ring-indigo-600 sm:text-sm dark:bg-gray-900 dark:text-gray-300">
<option value="public" {{ old('access_level', 'public') === 'public' ? 'selected' : '' }}>公開（所有人可見）</option>
<option value="members" {{ old('access_level') === 'members' ? 'selected' : '' }}>會員（需付費會籍）</option>
<option value="board" {{ old('access_level') === 'board' ? 'selected' : '' }}>理事會（僅理事可見）</option>
<option value="admin" {{ old('access_level') === 'admin' ? 'selected' : '' }}>管理員（僅管理員可見）</option>
</select>
@error('access_level')
<p class="mt-1 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
@enderror
</div>
<!-- Published At -->
<div>
<label for="published_at" class="block text-sm font-medium text-gray-700 dark:text-gray-300">發布時間（選填，留空則立即發布）</label>
<input type="datetime-local" name="published_at" id="published_at" value="{{ old('published_at') }}"
class="mt-1 block w-full rounded-md border-gray-300 dark:border-gray-700 shadow-sm focus:border-indigo-500 dark:focus:border-indigo-600 focus:ring-indigo-500 dark:focus:ring-indigo-600 sm:text-sm dark:bg-gray-900 dark:text-gray-300">
<p class="mt-1 text-xs text-gray-500 dark:text-gray-400">設定未來時間可排程發布</p>
@error('published_at')
<p class="mt-1 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
@enderror
</div>
<!-- Expires At -->
<div>
<label for="expires_at" class="block text-sm font-medium text-gray-700 dark:text-gray-300">過期時間（選填）</label>
<input type="datetime-local" name="expires_at" id="expires_at" value="{{ old('expires_at') }}"
class="mt-1 block w-full rounded-md border-gray-300 dark:border-gray-700 shadow-sm focus:border-indigo-500 dark:focus:border-indigo-600 focus:ring-indigo-500 dark:focus:ring-indigo-600 sm:text-sm dark:bg-gray-900 dark:text-gray-300">
@error('expires_at')
<p class="mt-1 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
@enderror
</div>
<!-- Meta Description -->
<div>
<label for="meta_description" class="block text-sm font-medium text-gray-700 dark:text-gray-300">SEO 描述（選填）</label>
<textarea name="meta_description" id="meta_description" rows="2"
class="mt-1 block w-full rounded-md border-gray-300 dark:border-gray-700 shadow-sm focus:border-indigo-500 dark:focus:border-indigo-600 focus:ring-indigo-500 dark:focus:ring-indigo-600 sm:text-sm dark:bg-gray-900 dark:text-gray-300"
placeholder="搜尋引擎描述">{{ old('meta_description') }}</textarea>
</div>
<!-- Is Pinned -->
<div class="flex items-center">
<input type="checkbox" name="is_pinned" id="is_pinned" value="1" {{ old('is_pinned') ? 'checked' : '' }}
class="h-4 w-4 rounded border-gray-300 dark:border-gray-700 text-indigo-600 focus:ring-indigo-500 dark:bg-gray-900">
<label for="is_pinned" class="ml-2 block text-sm text-gray-700 dark:text-gray-300">置頂此文章</label>
</div>
<!-- Display Order -->
<div id="display_order_container" style="display: none;">
<label for="display_order" class="block text-sm font-medium text-gray-700 dark:text-gray-300">顯示順序</label>
<input type="number" name="display_order" id="display_order" value="{{ old('display_order', 0) }}" min="0"
class="mt-1 block w-full rounded-md border-gray-300 dark:border-gray-700 shadow-sm focus:border-indigo-500 dark:focus:border-indigo-600 focus:ring-indigo-500 dark:focus:ring-indigo-600 sm:text-sm dark:bg-gray-900 dark:text-gray-300">
<p class="mt-1 text-xs text-gray-500 dark:text-gray-400">數字越小越優先顯示</p>
</div>
<!-- Action Buttons -->
<div class="flex items-center justify-end space-x-3 border-t border-gray-200 dark:border-gray-700 pt-6">
<a href="{{ route('admin.articles.index') }}" class="rounded-md border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700">
取消
</a>
<button type="submit" name="save_action" value="draft" class="rounded-md border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700">
儲存為草稿
</button>
<button type="submit" name="save_action" value="publish" class="rounded-md border border-transparent bg-indigo-600 dark:bg-indigo-500 px-4 py-2 text-sm font-medium text-white hover:bg-indigo-700 dark:hover:bg-indigo-600">
發布文章
</button>
</div>
</form>
</div>
</div>
</div>
@push('styles')
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/easymde/dist/easymde.min.css">
@endpush
@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/easymde/dist/easymde.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
// EasyMDE Markdown Editor
const easyMDE = new EasyMDE({
element: document.getElementById('content'),
spellChecker: false,
autosave: {
enabled: true,
uniqueId: 'article-create',
delay: 10000,
},
placeholder: '使用 Markdown 撰寫文章內容...',
toolbar: [
'bold', 'italic', 'heading', '|',
'quote', 'unordered-list', 'ordered-list', '|',
'link', 'image', 'table', '|',
'preview', 'side-by-side', 'fullscreen', '|',
'guide'
],
});
// Pin toggle
const isPinnedCheckbox = document.getElementById('is_pinned');
const displayOrderContainer = document.getElementById('display_order_container');
function toggleDisplayOrder() {
displayOrderContainer.style.display = isPinnedCheckbox.checked ? 'block' : 'none';
}
isPinnedCheckbox.addEventListener('change', toggleDisplayOrder);
toggleDisplayOrder();
});
</script>
@endpush
</x-app-layout>