添加文章编辑页面，支持markdown编辑器编辑预览模式

apps/blog/static/blog/js/article.js

@@ -0,0 +1,22 @@
+function article_update_save(csrf, api_url, article_slug) {
+    const article_body = testEditor.getMarkdown();
+    $.ajaxSetup({
+        data: {
+            csrfmiddlewaretoken: csrf
+        }
+    });
+    $.ajax({
+        type: 'post',
+        url: api_url,
+        data: {
+            'article_slug': article_slug,
+            'article_body': article_body,
+        },
+        dataType: 'json',
+        success: function (data) {
+            if (data.code === 0) {
+                window.location.href = data.data.callback
+            }
+        },
+    })
+}

apps/blog/templates/blog/articleEdit.html

@@ -0,0 +1,71 @@
+{% extends 'blog/base.html' %}
+{% load static tool_tags %}
+{% block head_title %}{{ article.title }}_{{ article.category }}{% endblock %}
+{% block metas %}
+    <meta name="robots" content="noindex">
+    <meta name="description" content="{{ article.summary }}">
+{% endblock %}
+{% block top-file %}
+    <link rel="stylesheet" href="{% static 'editor/css/editormd.min.css' %}"/>
+    <style>
+        #layout > header {
+            margin: 0 auto;
+            padding: 5px 0;
+            width: 90%;
+        }
+
+        #layout > header {
+            margin-bottom: 1rem;
+        }
+
+        #layout > header > div > a {
+            color: inherit;
+            text-decoration: none;
+        }
+
+        #layout > header > div > a:hover {
+            color: #ea6f5a;
+        }
+
+    </style>
+{% endblock %}
+{% block base_content %}
+    <div id="layout">
+        <header class="my-2">
+            <button type="button" class="btn btn-success btn-sm mr-2" id="save-article">保存修改</button>
+            <button type="button" class="btn btn-warning btn-sm mr-2" id="back-article">放弃编辑</button>
+            <button type="button" class="btn btn-info btn-sm mr-2" id="more-edit-article">后台编辑</button>
+        </header>
+        <div id="test-editormd">
+            <textarea style="display:none;">{{ article.body }}</textarea>
+        </div>
+    </div>
+{% endblock %}
+{% block end_file %}
+    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
+    <script src="{% static 'editor/js/editormd.min.js' %}"></script>
+    <script type="text/javascript">
+        let testEditor;
+
+        $(function () {
+            testEditor = editormd("test-editormd", {
+                width: "90%",
+                height: "1000",
+                syncScrolling: "single",
+                path: "{% static 'editor/lib/' %}"
+            });
+        });
+    </script>
+    <script src="{% static 'blog/js/article.js' %}?v20230628.1"></script>
+    <script>
+        $('#save-article').click(function () {
+            article_update_save("{{ csrf_token }}", "{% url 'blog:article_update' %}", "{{ article.slug }}")
+        });
+        $('#back-article').click(function () {
+            window.location.href = "{% url 'blog:detail' article.slug %}";
+        });
+        $('#more-edit-article').click(function () {
+            window.location.href = "{% url 'admin:blog_article_change' article.pk %}";
+        });
+    </script>
+{% endblock %}

apps/blog/templates/blog/detail.html

@@ -33,8 +33,8 @@
                         </li>
                         <li class="breadcrumb-item active d-none d-md-block" aria-current="page">
                             {% if user.is_superuser or user == article.author %}
-                                <a class="edit-blog" href="{% url 'admin:blog_article_change' article.pk %}"
-                                   target="_blank" title="后台编辑文章">
+                                <a class="edit-blog" href="{% url 'blog:article_edit' article.slug %}"
+                                   target="_blank" title="编辑文章">
                                     {{ article.title|slice:":50" }}{% if article.title|length > 50 %}
                                         ...{% endif %}</a>
                             {% else %}
@@ -44,8 +44,8 @@
                         </li>
                         <li class="breadcrumb-item active d-md-none" aria-current="page">
                             {% if user.is_superuser or user == article.author %}
-                                <a class="edit-blog" href="{% url 'admin:blog_article_change' article.pk %}"
-                                   target="_blank" title="后台编辑文章">当前文章</a>
+                                <a class="edit-blog" href="{% url 'blog:article_edit' article.slug %}"
+                                   target="_blank" title="编辑文章">当前文章</a>
                             {% else %}
                                 当前文章
                             {% endif %}

apps/blog/urls.py

@@ -2,18 +2,22 @@
 from django.urls import path
 from .views import test_page_view
 from .views import (IndexView, DetailView, CategoryView, TagView, AboutView,
-                    SilianView, MySearchView, ArchiveView, TimelineView)
+                    SilianView, MySearchView, ArchiveView, TimelineView, DetailEditView,
+                    update_article)
 
 urlpatterns = [
     path('go/', test_page_view, name='go'),  # 测试用页面
 
     path('', IndexView.as_view(), name='index'),  # 主页，自然排序
     path('article/<slug:slug>/', DetailView.as_view(), name='detail'),  # 文章内容页
+    path('article-edit/<slug:slug>/', DetailEditView.as_view(), name='article_edit'),  # 文章编辑
+    path('article-update/', update_article, name='article_update'),  # 文章更新
     path('category/<slug:slug>/', CategoryView.as_view(), name='category'),
     path('tag/<slug:slug>/', TagView.as_view(), name='tag'),
     path('about/', AboutView, name='about'),  # About页面
     path('timeline/', TimelineView.as_view(), name='timeline'),  # timeline页面
     path('archive/', ArchiveView.as_view(), name='archive'),  # 归档页面
     path('silian.xml', SilianView.as_view(content_type='application/xml'), name='silian'),  # 死链页面
     path('search/', MySearchView.as_view(), name='search_view'),  # 全文搜索
+
 ]

apps/blog/views.py

@@ -1,8 +1,11 @@
 from django.db.models import Count
-from django.shortcuts import get_object_or_404, render
+from django.http import Http404, HttpResponseForbidden, JsonResponse, HttpResponseBadRequest
+from django.shortcuts import get_object_or_404, render, reverse
 from django.utils.text import slugify
 from django.views import generic
 from django.conf import settings
+from django.views.decorators.http import require_http_methods
+
 from .models import Article, Tag, Category, Timeline, Silian, AboutBlog
 from .utils import site_full_url
 from django.core.cache import cache
@@ -33,7 +36,7 @@ def _wrap_code(self, source):
 # Create your views here.
 
 def test_page_view(request):
-    return render(request, 'test_html.html')
+    return render(request, '403.html')
 
 
 class ArchiveView(generic.ListView):
@@ -209,3 +212,44 @@ class MySearchView(SearchView):
 def robots(request):
     site_url = site_full_url()
     return render(request, 'robots.txt', context={'site_url': site_url}, content_type='text/plain')
+
+
+class DetailEditView(generic.DetailView):
+    """
+    文章编辑视图
+    """
+    model = Article
+    template_name = 'blog/articleEdit.html'
+    context_object_name = 'article'
+
+    def get_object(self, queryset=None):
+        obj = super(DetailEditView, self).get_object()
+        # 非作者及超管无权访问
+        if not self.request.user.is_superuser and obj.author != self.request.user:
+            raise Http404('Invalid request.')
+        return obj
+
+
+@require_http_methods(["POST"])
+def update_article(request):
+    """更新文章，仅管理员和作者可以更新"""
+    if request.method == 'POST' and request.is_ajax():
+        article_slug = request.POST.get('article_slug')
+        article_body = request.POST.get('article_body')
+
+        try:
+            article = Article.objects.get(slug=article_slug)
+            # 检查当前用户是否是作者
+            if not request.user.is_superuser and article.author != request.user:
+                return HttpResponseForbidden("You don't have permission to update this article.")
+
+            # 更新article模型的数据
+            article.body = article_body
+            article.save()
+
+            callback = reverse('blog:detail', kwargs={'slug': article_slug})
+            response_data = {'message': 'Success', 'data': {'callback': callback}, 'code': 0}
+            return JsonResponse(response_data)
+        except Article.DoesNotExist:
+            return HttpResponseBadRequest("Article not found.")
+    return HttpResponseBadRequest("Invalid request.")

apps/tool/templates/tool/editor.html

@@ -1,4 +1,4 @@
-{% load static tool_tags%}
+{% load static tool_tags %}
 <!DOCTYPE html>
 <html lang="en">
 <head>
@@ -10,43 +10,48 @@
     <title>Editor.md, Markdown在线编辑器_TendCode</title>
     <meta name="description" content="markdown 在线编辑器，基于开源项目 editor.md">
     <meta name="keywords" content="Editor.md,Markdown,Markdown编辑器,Markdown在线编辑器,在线编辑器,开源Markdown编辑器">
-    <link rel="shortcut icon" href="{% static 'editor/images/logos/editormd-favicon-16x16.ico'%}" type="image/x-icon"/>
-    <link rel="stylesheet" href="{% static 'editor/css/editormd.min.css' %}" />
+    <link rel="shortcut icon" href="{% static 'editor/images/logos/editormd-favicon-16x16.ico' %}" type="image/x-icon"/>
+    <link rel="stylesheet" href="{% static 'editor/css/editormd.min.css' %}"/>
+    <style>
+        body {
+            color: rgb(102, 102, 102);
+        }
+
+        #layout > header, .btns {
+            padding: 5px 0;
+            width: 90%;
+            margin: 0 auto;
+        }
+
+        #layout > header {
+            margin-bottom: 1rem;
+        }
+
+        #layout > header > div > a {
+            color: inherit;
+            text-decoration: none;
+        }
+
+        #layout > header > div > a:hover {
+            color: #ea6f5a;
+        }
+
+    </style>
     {% load_github_corners "right" "#eb7571" "https://github.com/pandao/editor.md" %}
 </head>
 <body>
-    <style>
-    body {
-        color: rgb(102, 102, 102);
-    }
-    #layout > header, .btns {
-        padding: 5px 0;
-        width: 90%;
-        margin: 0 auto;
-    }
-    #layout > header {
-        margin-bottom: 1rem;
-    }
-    #layout > header > div > a {
-        color: inherit;
-        text-decoration: none;
-    }
-    #layout > header > div > a:hover {
-        color: #ea6f5a;
-    }
 
-    </style>
-    <div id="layout">
-        <header>
-            <div>
-                <a href="{% url 'blog:index' %}">首页</a>
-                <span>&ensp;&gt;&ensp;</span>
-                <a href="{% url 'tool:total' %}">在线工具</a>
-                <span>&ensp;&gt;&ensp;</span>
-                <span>Markdown 在线编辑器</span>
-            </div>
-        </header>
-        <div id="test-editormd">
+<div id="layout">
+    <header>
+        <div>
+            <a href="{% url 'blog:index' %}">首页</a>
+            <span>&ensp;&gt;&ensp;</span>
+            <a href="{% url 'tool:total' %}">在线工具</a>
+            <span>&ensp;&gt;&ensp;</span>
+            <span>Markdown 在线编辑器</span>
+        </div>
+    </header>
+    <div id="test-editormd">
             <textarea style="display:none;">
 ### Disabled options
 
@@ -67,21 +72,21 @@
 ### Images
 
 ![部署博客](https://tendcode.com/cdn/article/180418/bsblog.png "部署博客")</textarea>
-        </div>
     </div>
-    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
-    <script src="{% static 'editor/js/editormd.min.js' %}"></script>
-    <script type="text/javascript">
-        var testEditor;
+</div>
+<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
+<script src="{% static 'editor/js/editormd.min.js' %}"></script>
+<script type="text/javascript">
+    let testEditor;
 
-        $(function() {
-            testEditor = editormd("test-editormd", {
-                width   : "90%",
-                height  : 720,
-                syncScrolling : "single",
-                path    : "{% static 'editor/lib/' %}"
-            });
+    $(function () {
+        testEditor = editormd("test-editormd", {
+            width: "90%",
+            height: 720,
+            syncScrolling: "single",
+            path: "{% static 'editor/lib/' %}"
         });
-    </script>
+    });
+</script>
 </body>
 </html>

izone/settings.py

@@ -301,7 +301,7 @@
 
 # ***************************************** 网站配置开始 ****************************************
 # 网站默认设置和上下文信息
-SITE_LOGO_NAME = os.getenv('IZONE_LOGO_NAME', 'IzoneBlog')
+SITE_LOGO_NAME = os.getenv('IZONE_LOGO_NAME', 'TendCode')
 SITE_END_TITLE = os.getenv('IZONE_SITE_END_TITLE', 'izone')
 SITE_DESCRIPTION = os.getenv('IZONE_SITE_DESCRIPTION', 'izone 是一个使用 Django+Bootstrap4 搭建的个人博客类型网站')
 SITE_KEYWORDS = os.getenv('IZONE_SITE_KEYWORDS', 'izone,Django博客,个人博客')

templates/403.html

@@ -0,0 +1,22 @@
+{% extends "blog/base.html" %}
+{% load static %}
+
+{% block head_title %}403{% endblock %}
+{% block metas %}
+    <meta name="description" content="403,无权限访问">
+    <meta name="keywords" content="403页面">
+{% endblock %}
+
+{% block base_content %}
+    <div class="container">
+        <div class="row errorpage">
+            <div class="col align-self-center error-img text-center">
+                <h1 style="font-size: 12rem;color: #ee795a">403</h1>
+                <div class="errormsg">
+                    <h3>你没有权限造访本星球，请返回地球...</h3>
+                    <a href="javascript:history.go(-1);">返回地球</a>
+                </div>
+            </div>
+        </div>
+    </div>
+{% endblock %}