Django - 03、从零开始制作仿CSDN博客的网站（将Markdown编辑器整合进前端，并编写视图）

最新推荐文章于 2024-05-07 19:37:27 发布

wangler2333

最新推荐文章于 2024-05-07 19:37:27 发布

阅读量2.5k

点赞数 6

分类专栏： django 文章标签： django python amaze ui 博客

本文链接：https://blog.csdn.net/u010139869/article/details/80209729

版权

仿CSDN博客网站结构，制作博客系统。实现文章展示、文章管理、文章在线编辑。

点击访问网站；主要功能已完成，一些细节还需完善

网站前端使用jQuery+amaze ui完成
后端使用Django+uwsgi+nginx完成
底层使用MySQL+Redis+FastDFS+Celery完成

特别感谢amaze ui和editor.md的开源！

一、使用自定义后台管理

1、修改前端html文件

后台源码下载地址：
https://download.csdn.net/download/u010139869/10392420

修改后源码见结尾代码资源

源码实例图片：
这里写图片描述

修改后效果图：
这里写图片描述

2、将Markdown编辑器整合进前端

Editor.md开源markdown编辑器官方地址：
https://pandao.github.io/editor.md/

整合后效果：
这里写图片描述

markdown编辑器核心代码，js代码为编辑器配置

<link rel="stylesheet" href="{% static 'markdown_editor/css/editormd.css' %}"/>
    <script src="{% static 'markdown_editor/js/editormd.min.js' %}"></script>

<div id="test-editormd">
    <textarea style="display:none;">{
  { markdown.article }}</textarea>
</div>

<script type="text/javascript">
    var testEditor;
    $(function () {
    
        testEditor = editormd("test-editormd", {
            width: "100%",
            height: 650,
            path: "{% static 'markdown_editor/md_lib/' %}",
            // theme: "dark",
            // previewTheme: "dark",
            // editorTheme: "pastel-on-dark",
            codeFold: true,
            saveHTMLToTextarea: true,
            searchReplace: true,
            taskList: true,
            tocm: true,

            {# imageUpload参数在console/markdown_editor/plugins/image-dialog/image-dialog.js文件中进行if判断 #}
            {# 利用其传参特性将csrf_token传入image-dialog.js文件进行form表单生成 #}
            imageUpload: "{% csrf_token %}",

            imageFormats: ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
            imageUploadURL: "{% url 'console:upload_image' %}",
        });
    });
</script>

完整代码（带有很多模板变量）见结尾源码下载

3、抽取父模板：

<!doctype>
{% load staticfiles %}
<html class="no-js">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>{% block title %}{% endblock %}</title>
    <meta name="description" content="这是一个 index 页面">
    <meta name="keywords" content="index">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta name="renderer" content="webkit">
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <link rel="icon" type="image/png" href="{% static 'i/favicon.ico' %}">
    <link rel="apple-touch-icon-precomposed" href="{% static 'i/favicon.ico' %}">
    <meta name="apple-mobile-web-app-title" content="Amaze UI"/>
    <link rel="stylesheet" href="{% static 'css/amazeui.min.css' %}"/>
    <link rel="stylesheet" href="{% static 'css/admin.css' %}">
    <script src="{% static 'js/jquery.min.js' %}"></script>
    {% block link %}
    {% endblock %}

</head>
<body>

<header class="am-topbar admin-header" data-am-sticky="{animation: 'slide-top'}" style="z-index: 8">
    <div class="am-topbar-brand">
        <strong>LeeBlog</strong>
        <

最低0.47元/天解锁文章

wangler2333

关注

6
点赞
踩
7

收藏

觉得还不错? 一键收藏
1
评论
Django - 03、从零开始制作仿CSDN博客的网站（将Markdown编辑器整合进前端，并编写视图）

仿CSDN博客网站结构，制作博客系统。实现文章展示、文章管理、文章在线编辑。点击访问网站；主要功能已完成，一些细节还需完善网站前端使用jQuery+amaze ui完成后端使用Django+uwsgi+nginx完成底层使用MySQL+Redis+FastDFS+Celery完成特别感谢amaze ui和editor.md的开源！一、使用自定义后台管理1...
复制链接

扫一扫