仿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>
<small>后台管理</small>
</div>