u o

templates/admin/article_create.html

@@ -0,0 +1,94 @@
+{{define "article_create"}}
+{{template "header" .}}
+
+<section class="max-w-3xl mx-auto px-4 py-10">
+    <h2 class="text-2xl font-bold text-gray-900 mb-8">{{index .Tr "article_create_title"}}</h2>
+
+    {{if .Error}}
+    <div class="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-lg mb-6 text-sm">
+        {{.Error}}
+    </div>
+    {{end}}
+
+    <form action="/admin/articles/new" method="post" class="space-y-6">
+        <!-- Title -->
+        <div>
+            <label class="block text-sm font-medium text-gray-700 mb-1">{{index .Tr "article_title"}}</label>
+            <input type="text" name="title" value="{{.FormTitle}}"
+                class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition-colors"
+                placeholder="{{index .Tr "article_title"}}">
+        </div>
+
+        <!-- Slug -->
+        <div>
+            <label class="block text-sm font-medium text-gray-700 mb-1">{{index .Tr "article_slug"}}</label>
+            <input type="text" name="slug" value="{{.FormSlug}}"
+                class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition-colors"
+                placeholder="{{index .Tr "article_slug_hint"}}">
+            <p class="text-xs text-gray-400 mt-1">{{index .Tr "article_slug_hint"}}</p>
+        </div>
+
+        <!-- Summary -->
+        <div>
+            <label class="block text-sm font-medium text-gray-700 mb-1">{{index .Tr "article_summary"}}</label>
+            <textarea name="summary" rows="3"
+                class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition-colors resize-y"
+                placeholder="{{index .Tr "article_summary"}}">{{.FormSummary}}</textarea>
+        </div>
+
+        <!-- Content (EasyMDE Markdown Editor) -->
+        <div>
+            <label class="block text-sm font-medium text-gray-700 mb-1">{{index .Tr "article_content"}}</label>
+            <textarea id="articleContent" name="content">{{.FormContent}}</textarea>
+        </div>
+
+        <!-- Cover -->
+        <div>
+            <label class="block text-sm font-medium text-gray-700 mb-1">{{index .Tr "article_cover"}}</label>
+            <input type="text" name="cover" value="{{.FormCover}}"
+                class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition-colors"
+                placeholder="https://...">
+        </div>
+
+        <!-- IsTop -->
+        <div class="flex items-center gap-2">
+            <input type="checkbox" name="is_top" value="1" id="isTopCheckbox"
+                class="w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500">
+            <label for="isTopCheckbox" class="text-sm font-medium text-gray-700">{{index .Tr "article_is_top"}}</label>
+        </div>
+
+        <!-- Submit Buttons -->
+        <div class="flex gap-3">
+            <button type="submit" name="status" value="0"
+                class="px-6 py-3 bg-gray-200 text-gray-700 rounded-lg font-medium hover:bg-gray-300 transition-colors cursor-pointer">
+                {{index .Tr "article_save_draft"}}
+            </button>
+            <button type="submit" name="status" value="1"
+                class="px-6 py-3 bg-blue-600 text-white rounded-lg font-medium hover:bg-blue-700 transition-colors cursor-pointer">
+                {{index .Tr "article_publish"}}
+            </button>
+        </div>
+    </form>
+</section>
+
+{{template "footer" .}}
+
+<script>
+var easyMDE = new EasyMDE({
+    element: document.getElementById('articleContent'),
+    spellChecker: false,
+    autosave: { enabled: false },
+    placeholder: '{{index .Tr "article_content"}}',
+    toolbar: [
+        'bold', 'italic', 'heading', '|',
+        'quote', 'unordered-list', 'ordered-list', '|',
+        'link', 'image', 'code', 'table', '|',
+        'preview', 'side-by-side', 'fullscreen', '|',
+        'guide'
+    ],
+    status: false,
+    minHeight: '300px'
+});
+</script>
+
+{{end}}

templates/layouts/base.html

@@ -8,6 +8,8 @@
     <script src="https://cdn.tailwindcss.com"></script>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.6.2/cropper.min.css">
     <script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.6.2/cropper.min.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/easymde/dist/easymde.min.css">
+    <script src="https://cdn.jsdelivr.net/npm/easymde/dist/easymde.min.js"></script>
 </head>
 <body class="bg-gray-50 min-h-screen flex flex-col">
     <!-- Navigation -->