基于 Django 的个人网站（3）

不可言诉的深渊

发布于 2020-05-27 11:39:35

2.4K0

发布于 2020-05-27 11:39:35

文章被收录于专栏：Python机器学习算法说书人Python机器学习算法说书人

上回说到，因为富文本的内容在前台的文章详情页面显示的时候出了一些小问题，比如图片表格没有居中，代码不能选择语言外加上没有高亮显示，今天我就来解决这些问题。

增加可以选择语言的代码块

因为 django-ckeditor-5 里面默认是没有可以选择语言代码块插件的，所以我们需要自己定制这个插件，定制之前我们首先去 GitHub 把 django-ckeditor-5 下载下来，下面直接给出 GitHub 的项目地址：

https://github.com/hvlads/django-ckeditor-5

下载下来之后我们随便放在哪里，然后进行解压（如果是 git clone，请跳过这一步），我在这里是放在 D:\PycharmProjects\django-ckeditor-5-master，我们来看一下里面的文件，如图所示。

看了看这些文件似乎没什么用，我直接凭感觉进入 django_ckeditor_5 目录，发现如图所示。

已经看到了 webpack 相关的 JS 文件了，说明这里十有八九是 node.js 的 ckeditor5 项目根目录，我们直接把这个目录当做是 node.js 项目打开（打开之前，请先安装 node.js），打开之后如图所示。

我这里用的是 PyCharm 专业版的 node.js 项目选项来打开这个项目的，当然也可以使用其他的 IDE，既然准备工作已经完成了，下面我们就可以自定义这个插件，在这里我以添加代码块插件为例讲解如何自定义 django-ckeditor-5。

自定义 django-ckeditor

在这里，我通过添加代码块插件为例讲解一下如何自定义 django-ckeditor-5，在自定义之前我们首先需要下载 django-ckeditor-5 源码，然后找到其中的 node.js 项目并打开，这些操作前面都做过了。之后我们就是尝试把默认的 ckeditor5 进行修改，主要分为以下几步：1.修改 JS 源代码，2.安装依赖模块，3.使用 webpack 重新打包，把打包好的预编译的 JS 文件，复制到 django-ckeditor-5 的对应路径下（同时也需要复制修改的源码文件）。我们现在就可以直接进行修改源代码的操作了。

修改 JS 源码

love

先打开 static\django_ckeditor_5\src\ckeditor.js 文件，去里面进行插件的增加和删除，我是要增加一个插件——代码块插件 CodeBlock。这个很简单，首先导入这个插件，然后添加到 builtinPlugins 数组中，代码如下：

// The editor creator to use.
import ClassicEditorBase from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';

import Essentials from '@ckeditor/ckeditor5-essentials/src/essentials';
import UploadAdapter from '@ckeditor/ckeditor5-adapter-ckfinder/src/uploadadapter';
import Autoformat from '@ckeditor/ckeditor5-autoformat/src/autoformat';
import Bold from '@ckeditor/ckeditor5-basic-styles/src/bold';
import Italic from '@ckeditor/ckeditor5-basic-styles/src/italic';
import Underline from '@ckeditor/ckeditor5-basic-styles/src/underline';
import Strikethrough from '@ckeditor/ckeditor5-basic-styles/src/strikethrough';
import Code from '@ckeditor/ckeditor5-basic-styles/src/code';
import Subscript from '@ckeditor/ckeditor5-basic-styles/src/subscript';
import Superscript from '@ckeditor/ckeditor5-basic-styles/src/superscript';
import BlockQuote from '@ckeditor/ckeditor5-block-quote/src/blockquote';
import Heading from '@ckeditor/ckeditor5-heading/src/heading';
//import Image from '@ckeditor/ckeditor5-image/src/image';
import ImageCaption from '@ckeditor/ckeditor5-image/src/imagecaption';
import ImageStyle from '@ckeditor/ckeditor5-image/src/imagestyle';
import ImageToolbar from '@ckeditor/ckeditor5-image/src/imagetoolbar';
import ImageUpload from '@ckeditor/ckeditor5-image/src/imageupload';
import Link from '@ckeditor/ckeditor5-link/src/link';
import List from '@ckeditor/ckeditor5-list/src/list';
import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph';
import ImageResize from '@ckeditor/ckeditor5-image/src/imageresize';
import SimpleUploadAdapter from '@ckeditor/ckeditor5-upload/src/adapters/simpleuploadadapter';
import Alignment from '@ckeditor/ckeditor5-alignment/src/alignment';
import PasteFromOffice from '@ckeditor/ckeditor5-paste-from-office/src/pastefromoffice';
import Font from '@ckeditor/ckeditor5-font/src/font';
import MediaEmbed from '@ckeditor/ckeditor5-media-embed/src/mediaembed';
import RemoveFormat from '@ckeditor/ckeditor5-remove-format/src/removeformat';
import Table from '@ckeditor/ckeditor5-table/src/table';
import TableToolbar from '@ckeditor/ckeditor5-table/src/tabletoolbar';
import TableProperties from '@ckeditor/ckeditor5-table/src/tableproperties';
import TableCellProperties from '@ckeditor/ckeditor5-table/src/tablecellproperties';
import Indent from '@ckeditor/ckeditor5-indent/src/indent';
import IndentBlock from '@ckeditor/ckeditor5-indent/src/indentblock';
import Highlight from '@ckeditor/ckeditor5-highlight/src/highlight';
import TodoList from '@ckeditor/ckeditor5-list/src/todolist';
import ImageTitle from './custom_plugins/imagetitle';
import ImageWithTitle from './custom_plugins/imagewithtitle';

import CodeBlock from '@ckeditor/ckeditor5-code-block/src/codeblock';


export default class ClassicEditor extends ClassicEditorBase {}

// Plugins to include in the build.
ClassicEditor.builtinPlugins = [
    Essentials,
    UploadAdapter,
    Autoformat,
    Bold,
    Italic,
    Underline,
    Strikethrough, Code, Subscript, Superscript,
    BlockQuote,
    Heading,
    //Image,
    ImageWithTitle,
    ImageCaption,
    ImageStyle,
    ImageToolbar,
    ImageUpload,
    ImageResize,
    Link,
    List,
    Paragraph,
    Alignment,
    Font,
    PasteFromOffice,
    SimpleUploadAdapter,
    MediaEmbed,
    RemoveFormat,
    Table, TableToolbar,
    TableProperties, TableCellProperties,
    Indent, IndentBlock,
    Highlight,
    TodoList,
    ImageTitle,
    
    CodeBlock
];

然后去 package.json 中给 dependencies 和 devDependencies 中增加一项，增加项如下：

"@ckeditor/ckeditor5-code-block": "^19.0.0"

安装相关模块

love

增加完成之后就简单很多了，我们先按照 ckeditor5 官网教程安装一些必要的模块，在安装之前先把工作目录切换到 node.js 项目根目录，安装命令为 npm install --save 模块名，下面我就按顺序写出需要安装的模块。

@ckeditor/ckeditor5-build-classic
@ckeditor/ckeditor5-dev-webpack-plugin
@ckeditor/ckeditor5-dev-utils
postcss-loader@3
raw-loader@3
style-loader@1
webpack@4
webpack-cli@3
@ckeditor/ckeditor5-code-block

使用 webpack 重新打包

love

安装完这些模块之后我们就去使用 webpack 重新进行打包，直接执行命令 webpack 就行了，打包完成之后如图所示。

输出有点多，我们不用管，只要没看到报错就行，接下来我们把 static\django_ckeditor_5\dist 目录下的文件复制到 Python 模块 django-ckeditor-5 的对应路径中，在我这里是 D:\ANACONDA3\Lib\site-packages\django_ckeditor_5\static\django_ckeditor_5\dist，然后把 static\django_ckeditor_5\src 目录下的文件复制 Python 模块 django-ckeditor-5 的对应路径中，在我这里是 D:\ANACONDA3\Lib\site-packages\django_ckeditor_5\static\django_ckeditor_5\src。

当然也可以修改好之后通过源码安装 django-ckeditor-5，我为了省事，直接替换文件。

最后一点配置

终于把 django-ckeditor-5 成功地自定义了，最后我们需要去配置一下，打开 Python 项目下的 PersonalWebsite\settings.py，去里面修改 CKEDITOR_5_CONFIGS 变量，在 toolbar 对应的列表中添加值为 codeBlock 的字符串元素，代码如下：

CKEDITOR_5_CONFIGS = {
    'default': {
        'blockToolbar': [
            'paragraph', 'heading1', 'heading2', 'heading3',
            '|',
            'bulletedList', 'numberedList',
            '|',
            'blockQuote', 'imageUpload'
        ],
        'toolbar': ['heading', '|', 'outdent', 'indent', '|', 'bold', 'italic', 'link', 'underline', 'strikethrough',
                    'code', 'subscript', 'superscript', 'highlight', '|', 'alignment', 'codeBlock',
                    'bulletedList', 'numberedList', 'todoList', '|',  'blockQuote', 'imageUpload', '|',
                    'fontSize', 'fontFamily', 'fontColor', 'fontBackgroundColor', 'mediaEmbed', 'removeFormat',
                    'insertTable'],
        'image': {
            'toolbar': ['imageTextAlternative', 'imageTitle', '|', 'imageStyle:alignLeft', 'imageStyle:full',
                        'imageStyle:alignRight', 'imageStyle:alignCenter', 'imageStyle:side',  '|'],
            'styles': [
                'full',
                'side',
                'alignLeft',
                'alignRight',
                'alignCenter',
            ]
        },
        'table': {
            'contentToolbar': ['tableColumn', 'tableRow', 'mergeTableCells',
                               'tableProperties', 'tableCellProperties'],
            'tableProperties': {
                'borderColors': customColorPalette,
                'backgroundColors': customColorPalette
            },
            'tableCellProperties': {
                'borderColors': customColorPalette,
                'backgroundColors': customColorPalette
            }
        },
        'heading': {
            'options': [
                {'model': 'paragraph', 'title': 'Paragraph', 'class': 'ck-heading_paragraph'},
                {'model': 'heading1', 'view': 'h1', 'title': 'Heading 1', 'class': 'ck-heading_heading1'},
                {'model': 'heading2', 'view': 'h2', 'title': 'Heading 2', 'class': 'ck-heading_heading2'},
                {'model': 'heading3', 'view': 'h3', 'title': 'Heading 3', 'class': 'ck-heading_heading3'}
            ]
        }
    }
}

然后运行项目进入增加文章页面看看，如图所示。

可以发现代码块插件成功被添加，要想添加其它插件也是利用的同样的方法，接下来我们去首页看看代码块插件的实现效果，如图所示。

代码高亮

可以发现代码块并没有高亮显示，虽然可以成功添加代码块，代码块高亮显示我们可以使用 Prism，进入官网下载两个文件 prism.css 和 prism.js，下载好之后我们就需要把这个文件引用到项目中，如图所示。

目录没有的自己去新建，这个我就不解释了，接下来修改 PersonalWebsite\settings.py，去里面添加一个变量，代码如下：

STATICFILES_DIRS = [
    os.path.join(BASE_DIR, "static")
]

然后去修改 PersonalWebsite\urls.py，修改后代码如下：

from django.contrib import admin
from django.urls import path, include
from django.contrib.staticfiles.urls import staticfiles_urlpatterns
from django.conf import settings
from django.conf.urls.static import static
from personal_website.views import IndexView, ArticleDetailView
urlpatterns = [
    path('admin/', admin.site.urls),
    path("ckeditor5/", include('django_ckeditor_5.urls')),
    path('', IndexView.as_view()),
    path('articles/<pk>', ArticleDetailView.as_view())
]+static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)+staticfiles_urlpatterns()

接着去按照 Prism 官网给的教程去修改文章详情页面的 html 文件，修改后代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{{ article.title }}</title>
    <link href="/static/css/prism.css" rel="stylesheet" />
</head>
<body>
<!--suppress HtmlDeprecatedAttribute -->
<h1 align="center">{{ article.title }}</h1>
<p>{{ article.abstract }}</p>
{{ article.content|safe }}
<script src="/static/js/prism.js"></script>
</body>
</html>

然后启动项目，打开进入文章详情页面看一下效果，如图所示。

可以发现确实成功的实现了代码高亮，接下来我们需要处理的是段落的首行缩进，图片和表格的居中显示。

其他格式

段落的首行缩进，图片和表格的居中显示很简单，使用 CSS 就可以解决掉，在编写 css 之前，我们先找到段落、图片和表格对应的标签，先直接上图。

我们可以发现段落对应的标签是 p，图片和表格全是 figure，只不过 class 不同，知道这些写出实现这三个功能的 CSS 简直太简单了，代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{{ article.title }}</title>
    <link href="/static/css/prism.css" rel="stylesheet" />
    <style>
        p{
            text-indent: 2em;
        }
        figure{
            text-align: center;
            margin: 0 auto;
        }
</style>
</head>
<body>
<!--suppress HtmlDeprecatedAttribute -->
<h1 align="center">{{ article.title }}</h1>
<p>{{ article.abstract }}</p>
{{ article.content|safe }}
<script src="/static/js/prism.js"></script>
</body>
</html>

最后我们去看一下效果，如图所示。