从零开始学Vue-vue模板和组件

言

我们在前面的章节中已经了解了如何在屏幕上以文本内容的形式获得输出。在本文中我们将学习如何在屏幕上以HTML模板的形式获得输出。我们先看一段代码好来帮助我们理解。

//index.html
<!DOCTYPE html>
<html lang="en">
 <head>
 <meta charset="UTF-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 <title>vue模板和组件</title>
 </head>
 <body>
 <div id="vue_det">
 <h1>姓名 : {{ name }}</h1>
 <div>{{ htmlcontent }}</div>
 </div>
 <script src="https://cdn.jsdelivr.net/npm/vue"></script>
 <script type="text/javascript" src="js/app.js"></script>
 </body>
</html>

//js/app.js+
var vm=new Vue({
 el: '#vue_det',
 data: {
 name: "孙悟空",
 htmlcontent: "<div><h1>Vue Js Template</h1></div>"
 }
})

使用live-server启动项目得到如下结果

因为我们使用了插值，也就是双括号，我们在浏览器中就真实的显示了html内容，这显然和我们想要渲染html是不同的，我们希望它在浏览器能显示html渲染的内容。

v-html

为了解决上面的问题，我们不得不适用v-html指令，只要我们将v-html属性分配给html元素，vue就会知道将其作为html内容输出，我们尝试下：

<div id="vue_det">
 <h1>姓名 : {{ name }}</h1>
 <div v-html="htmlcontent"></div>
 </div>

得到了如下结果

从浏览器调试可以看出

与app.js中填写的html字符串表现得相同

属性分配

我们已经了解了如何将HTML模板添加到DOM。现在，我们将实现如何向现有的HTML元素添加属性。想象一下，我们在HTML文件中有一个图像标记，我们想要分配src属性，举例，直接看代码

 <div id="vue_det">
 <h1>姓名 : {{ name }}</h1>
 <div v-html="htmlcontent"></div>
 <img src="" width="300" height="250" />
 </div>

img标签的src是空的，我们将src放到js的数据对象中

var vm=new Vue({
 el: '#vue_det',
 data: {
 name: "孙悟空",
 htmlcontent: "<div><h1>Vue Js Template</h1></div>",
 imgsrc: './img/img.jpg'
 }
})

然后我们修改index.html

<img src="{{ imgsrc }}" width="300" height="250" />

结果如下

好像哪里不对，其实不是，在vue中，我们绑定属性用v-bind指令

 <img v-bind:src="imgsrc" width="300" height="250" />

可以看到我们浏览器中渲染的html

组件

Vue组件是VueJS的重要功能之一，可以创建自定义元素，可以在HTML中重复使用。让我们使用一个示例并创建一个组件。

//index.html
<!DOCTYPE html>
<html lang="en">
 <head>
 <meta charset="UTF-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 <title>vue模板和组件</title>
 </head>
 <body>
 <div id="component_test">
 <testcomponent></testcomponent>
 </div>
 <div id="component_test1">
 <testcomponent></testcomponent>
 </div>
 <script src="https://cdn.jsdelivr.net/npm/vue"></script>
 <script type="text/javascript" src="js/app.js"></script>
 </body>
</html>

//js/app.js
Vue.component('testcomponent', {
 template: '<div><h1>This is coming from component</h1></div>'
});
var vm=new Vue({
 el: '#component_test'
});
var vm1=new Vue({
 el: '#component_test1'
});

我们创建了两个div，id分别是component_test和component_test1，在app.js中我们创建了两个Vue实例，外加一个Vue组件，要想创建组件，它的语法是

Vue.component('nameofthecomponent',{ // options});

创建组件后，组件的名称将成为自定义元素，并且可以在创建的Vue实例元素中使用相同的名称，在app.js文件中创建的组件中，我们添加了一个模板，我们已为其分配了HTML代码。这是一种注册全局组件的方法，可以将其作为任何vue实例的一部分，我们发现这时候浏览器变成了

组件被赋予自定义元素标记，即<testcomponent> </ testcomponent>。但是，当我们在浏览器中检查相同内容时，我们发现结果没有自定义的元素，如以下屏幕截图所示。

我们也可以将组件作为vue实例的一部分

var vm=new Vue({
 el: '#component_test',
 components:{
 'testcomponent': {
 template : '<div><h1>This is coming from component</h1></div>'
 }
 }
});

这是本地注册组件，组件只是vue实例的一部分。到目前为止我们已经基本组件的实现。现在我们来继续扩展。

// js/app.js
Vue.component('testcomponent', {
 template: '<div v-on:mouseover="changename()" v-on:mouseout="originalname();"><h1>Custom Component created by <span id="name">{{name}}</span></h1></div>',
 data: function () {
 return {
 name: "tom"
 }
 },
 methods: {
 changename: function () {
 this.name="bob";
 },
 originalname: function () {
 this.name="tom";
 }
 }
});
var vm=new Vue({
 el: '#component_test'
});
var vm1=new Vue({
 el: '#component_test1'
});

在上面的app.js文件中，我们添加了一个函数，它返回一个对象。该对象具有name属性，该属性被赋值为'tom'。尽管这里data是函数，我们也可以像直接在Vue实例中使用其属性，此外这里还添加了两个函数，在changename中，我们更改name属性，在originalname中我们将其重置为原始名称，有关事件我们后面在讨论，这段代码的结果是：

因为分配了mouseover和mouseout事件，当鼠标悬停在tom上时，会将tom改成bob

动态组件

使用关键字<component> </ component>创建动态组件，并使用属性绑定，如下

<component v-bind:is="view"></component>

//index.html
<!DOCTYPE html>
<html lang="en">
 <head>
 <meta charset="UTF-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 <title>vue模板和组件</title>
 </head>
 <body>
 <div id="databinding">
 <component v-bind:is="view"></component>
 </div>
 <script src="https://cdn.jsdelivr.net/npm/vue"></script>
 <script type="text/javascript" src="js/app.js"></script>
 </body>
</html>

//app.js
var vm=new Vue({
 el: "#databinding",
 data: {
 view: "component1"
 },
 components: {
 component1: {
 template:
 '<div><span style="font-size:25;color:red;">Dynamic Component</span></div>'
 }
 }
});

浏览器已显示值：

eb中使用一些图案做为背景图案是一种时常可见的，早期一般都是通过图片来完成。直至CSS一些新特性更趋成熟和稳定的时候，会通过CSS的相关技术，比如CSS的渐变属性配合background-size之类的来做一些复杂而又美观的Web图案，运用于background-image之中。

而其中最为出名的是@Lea写的CSS3 Patterns，并且@Lea在其《CSS Secrets》一书中特别介绍了CSS如何实现复杂背景图案。虽然CSS Patterns实现的图案是令人感到惊艳与好奇，但其扩展性以及适配性还是有一定的限制。因此有同学将CSS Patterns换成了SVG Patterns（也就是使用SVG相关的特性实现了CSS Patterns相同的效果）。当然，除此之外，还有很多工具能帮助我们来实现CSS图案的效果，其中有的工具可以生成代码，而有的工具会生成图片。

随着前端技术不断的革新，不久前看到一个生成Web图片的组件：<css-doodle /> —— 使用CSS绘制图案的Web组件！

这是一个非常强大的Web组件，初次看到，你会觉得她非常的神奇和强大。至于为什么？你要是花日间阅读完后面的内容，你就知道其中的原委了。为了让大家对其有初次的感觉，先上一个使用<css-doodle />组件创作的图案效果，如下：

是不是有点蠢蠢欲动的感觉。如果是的话，跟着下面的节奏继续往下阅读。

什么是<css-doodle />

<css-doodle />是一个Web组件。其基于Shadow DOM V1和Custom Elements V1来构建的。该组件可以帮助轻松的使用Custom Elements、Shadow DOM和CSS Grid创建任何你想要的图案（CSS 图案）。创建出来的图案你可以运用于Web页面中。

当你看到Custom Elements、Shadow DOM和CSS Grid的时候，你一定会心却，这些东西浏览器能支持。事实上你的担忧是正常的，因为该组件到目前为止只在最新的Chrome和Safari浏览器上可以正常的运行。如果你想运用于其他的浏览器上，你需要相关的Polyfilling。

简单点说：

该组件通过其内部的规则（纯CSS）会生成一系列的div构建的CSS Grid。你可以使用CSS轻松地操作这些div（单元格，每个div就是一个单元格）来生成图案。生成的图案既可以是静态的，也可以是动态的。而其限制仅限于CSS本身的限制。

开始使用<css-doodle />

使用<css-doodle />组件创建图案很简单，当然有一个前提是你对其相关的API和使用方法有所了解。这里先来看怎么在你的项目中使用该组件。

使用<css-doodle />组件有两种方法，第一种是比较原始的方法，就是在你的HTML文件中引入该组件所需要的JS和CSS文件。最简单的方法就是直接引用cdnjs：

[xml] view plain copy

这个script你可以在</head>或</body>结束标签前调用。然后在任何你想要的地方调用：

[xml] view plain copy

<css-doodle> /* 绘制图案的代码放在这里 */

</css-doodle>

如果你不想使用cdnjs提供的在线资源，你也可以将css-doodle-0.3.0.min.js文件下载到你本地的项目中，通过相对路径来引用下载的文件。

除此之外，也可以通过npm的方式将<css-doodle />安装到你的项目中，然后通过import的方式将其引入到你的项目中。比如说在Vue项目中，你可以先执行：

npm install css-doodle

或者使用yarn来安装：

yarn add css-doodle

然后在你想要使用<css-doodle />的地方先import，比如在App.vue文件中：

[python] view plain copy

import CSSDoodle from 'css-doodle'

然后你就可以在<template>中引用，比如：

这时在你的页面中看到的效果如下：

这个时候，你和我可以一样，对<css-doodle></css-doodle>中代码一无所知，但正是这里面的一些代码生成了上图这样的效果。这个时候你通过浏览器开发者工具查看代码的时候，你会看到生成的代码如下图所示：

基本语法

<css-doodle />的语法是基于CSS的，这一点需要特别记住 —— 一切能用于Web的CSS，都可以用于此处！。除此之外，他还提供了一些额外的实用函数和简写的属性。这些函数和属性可以在其官网中查阅。

有关于<css-doodle />提供的函数和属性，在本文章中不做一一介绍，如果你想使用该组件来创作一些有意思的Web图案，那非常有必要花一定的时间去阅读官方文档。并尝试自己写写Demo。你会很快就能掌握这些规则和使用姿势！

先看一个简单示例

使用<css-doodle />其后台运行机制是使用CSS Grid布局创建一个网格系统。其实创建一个简单的网格是<css-doodle />最为简单的一个示例。比如说，我们创建一个5 x 8（五行八列）的网格，并且这个网格的width和其父容器的宽度相同（即100%）,高度为浏览器屏幕高度的五分之一。那么我们就可以这样写代码：

你将看到的效果如下：

特别注意：如果你的浏览器看不到任何的效果，请确认你使用的是最新版本的Chrome或Safari浏览器！后续的示例不再做相关的提示！

为了帮助没时间阅读官方文档的同学能看懂上面的代码，这里简单的做一下说明：

:doodle：是一个特殊的选择器，其指向的是组件元素本身，即<css-doodle />。注意，其样式会被你的CSS样式覆盖
@grid：创建一个网格，其后面配置的参数说明你要创建的网格。比如上面的示例5x8 / 100% 100vh;。其中5 x 8表示的是创建一个五行八列的网格；100%表示网格的宽度（和其容器宽度相同）；100vh表示网格的高度（浏览器屏幕的高度）
:after：每个单元格的伪元素，用于生成内容，比如你在效果中看到的数字
@index()：是一个函数，返回当前单元格的索引号，注意其开始值是从1开始
@even：对应的偶数单元格，这里将偶数单元格的背景颜色设置为#f36
@odd：类似于@even，但对应的是奇数单元格

再来看一个复杂的示例

上面看到的效果是一个简单的示例效果，使用了一些最基本的样式规则写了一个五行八列的网格。其实我们还可以利用<css-doodle />提供的一些函数和一些其他的CSS样式规则，制作一些复杂的效果，而且还可以是带有动效的。比如下面这个示例：

对应的效果如下：

效果是不是很炫，很酷!

@place-cell：将单元格相对布局
@size：设置单元格的width和height
@rand：从数字的范围内返回一个随机值
@pick：给定的列表中随机选取一个值

正如你所见，在上面这个示例中，还使用了@keyframe来声明动画，并且还使用了CSS自定义属性。再次验证，只要是浏览器支持的CSS属性都可能用于<css-doodle />。

带有交互效果的案例

上面的示例，使用@keyframes可以做一个带有动画的效果。除此之外，还有更神奇的效果，那就是使用<css-doodle />的JavaScript API还可以实现现有交互效果的图案。比如下面这个示例：

当我们鼠标悬浮在上面的时，图标会旋转，这依旧采用的是@keyframes做的一个简单动画。除此之外，你点击屏幕时，整个图案会更新。

实现这样的效果很简单，就只是简单的加了下面这么几行JavaScript代码：

[php] view plain copy

const myDoodle=document.querySelector('.my-doodle'); myDoodle.addEventListener('click', ()=> { myDoodle.update(); });

使用了一个.update()函数，当你在屏幕单击时，整个组件会使用给定的样式重新刷新。

上面看到的是不同方式实现的一些图案效果。除些之外，你可以发动你的大脑和创意，制作一些其他更有意思的图案效果。如果你感兴趣的话，可以看看@yuanchuan在Codepen整理的有关于<css-doodle />组件制作的一些图案效果。

总结

这篇文章主要科普了一下<css-doodle />组件。简单的回顾一下，该组件是一个Web组件，主要是基于Shadow DOM V1 和 Custom Elements V1 来构建的。而其背后运行的原理是使用CSS Grid和纯CSS规则制作的一些图案。除了CSS自带的规则之外，该组件还封装了一些函数和属性，能让你快速制作一些图案。另外还你还可以使用Unicode字符创建一些字符图案。

当你阅读到这里的时候，我想你对<css-doodle />组件有所了解，如果你动手了，或许你创作出一些与众不同的图案效果。希望你能在下面的评论中分享您的作品。如果你有其他的想法，也欢迎在下面的评论中分享。最后，该文章要是对您有所帮助的话，欢迎各位爷打个赏，鼓励我继续创作一些优质的教程。(^_^)

为开发人员，我们依赖于静态分析工具来检查、lint(分析)和转换我们的代码。我们使用这些工具来帮助我们提高生产效率并生成更好的代码。然而，当我们使用markdown编写内容时，可用的工具就很少。

在本文中，我们将介绍如何开发一个Markdown扩展来解决在使用Markdown管理Django站点中的内容时遇到的挑战。

你认为他们有linter吗？

照片来自Pexels,由mali maeder拍摄

问题

像每个网站一样，我们在主页、FAQ部分和“关于”页面等地方都有不同类型的(大部分)静态内容。很长一段时间以来，我们都是在Django模板中直接管理这些内容的。

当我们最终决定是时候将这些内容从模板转移到数据库中时，我们认为最好使用Markdown。从Markdown生成HTML更安全，它提供了一定程度的控制和一致性，并且对于非技术用户来说更容易处理。随着我们转移过程的进展，我们注意到我们遗漏了一些东西:

内部链接

当URL更改时，链接到内部页面的链接可能会中断。在Django模板和视图中，我们使用了reverseand {% url %}，但是这在普通的Markdown中是不可用的。

在不同环境之间进行复制

绝对内部连接不能在不同环境之间进行复制。这可以使用相对链接来解决，不过目前没有开箱即用的增强这一点的方法。

无效链接

无效链接会损害用户体验，并导致用户质疑整个内容的可靠性。这并不是Markdown独有的东西，只不过HTML模板是由对URL有一定了解的开发人员维护的。另一方面，Markdown文档是为非技术写作人员设计的。

前期工作

当我研究这个问题时，我搜索了Python linters、Markdown预处理器和扩展来帮助生成更好的Markdown。结果都不是很好。一个引人注目的方法是使用Django模板来生成Markdown文档。

使用Django模板预处理Markdown

使用Django模板，你可以使用诸如url之类的模板标记来反向查询URL名称，并配合使用条件、变量、日期格式和所有其他Django模板特性。这种方法本质上是使用Django模板作为Markdown文档的预处理程序。

我个人认为这可能不是非技术作家的最佳解决方案。另外，我担心提供对Django模板标记的访问可能是危险的。

使用 Markdown

对这个问题有了更好的理解之后，我们准备在Python中更深入地研究Markdown。

将Markdown转换为HTML

要在Python中开始使用Markdown，我们先安装markdown包：

接着，创建一个Markdown对象并使用其函数将一些Markdown转换成HTML：

你现在可以在你的模板中使用这个HTML代码片段。

使用Markdown扩展

基本的Markdown处理器提供了生成HTML内容的基本要素。对于更“新奇”的选项，Python markdown包包含了一些内置扩展。一个流行的扩展是“extra”扩展，除了其他东西之外，它增加了对隔离代码块的支持:

为了使用我们独特的Django功能扩展Markdown，我们将开发自己的扩展。

创建一个Markdown扩展来处理内联链接

如果你查看源代码，你将看到要将markdown转换为HTML, Markdown会使用多种不同的处理器。一种类型的处理器是内联处理器。内联处理器会匹配特定的内联模式，如链接、反引号、粗体文本和带下划线的文本，并将它们转换为HTML。

我们的Markdown扩展的主要目的是验证和转换链接。因此，我们最感兴趣的内联处理器是LinkInlineProcessor。这个处理器以[Haki的网站](https://hakibenito.com)的形式获取markdown ，解析它并返回一个包含链接和文本的元组。

为了扩展该功能，我们扩展了LinkInlineProcessor并创建了一个Markdown.Extension, 我们用它来处理链接:

我们来将这段代码分解一下：:

DjangoUrlExtension扩展注册了一个名为DjangoLinkInlineProcessor的内联链接处理器。这个处理器将取代任何其他现有的链接处理器。
内联处理器DjangoLinkInlineProcessor扩展了内置的LinkInlineProcessor，并在它处理的每个链接上调用clean_link函数。
clean_link函数接收一个链接和一个域名，并返回一个转换后的链接。这就是我们要插入我们的实现的地方。

如何获得网站域名

要识别到你自己网站的链接，你必须知道你的网站的域名。如果你正在使用Django的sites框架，那么你可以使用它来获取当前域名。

我没有把它包含在我的实现中，因为我们没有使用sites框架。相反，我们在Django设置中设置了一个变量。

获取当前域名的另一种方法是使用HttpRequest对象。如果内容只在你自己的站点中被编辑，你可以尝试从请求对象中插入站点域名。这可能需要对你的实现进行一些更改。

要使用该扩展，请在初始化一个新的Markdown实例时添加它:

太好了，这个扩展已经被使用了，我们准备进入有趣的部分了！

验证和转换Django链接

既然我们得到了在所有链接上调用clean_link的扩展，那我们可以来实现我们的验证和转换逻辑。

验证mailto链接

要开始工作，我们将从一个简单的验证开始。mailto链接对于使用预定义的收件人地址、主题甚至消息正文打开用户的电子邮件客户端非常有用。

一个常见的mailto链接是这样的:

这个链接将打开你的电子邮件客户端，并设置成撰写一封主题行为“我需要帮助!”的新电子邮件给“support@service.com”。

mailto链接不一定非要包含电子邮件地址。如果你看一看这篇文章底部的“分享”按钮，你会发现像这样的一个mailto链接:

这个mailto链接没有包含收件人，仅包含了主题行和消息正文。

既然我们已经很好地理解了mailto链接是什么样子的，我们就可以向clean_link函数添加第一个验证:

为了验证mailto链接，我们向clean_link中添加了以下代码:

检查链接是否以mailto:开头，以识别相关链接。
使用正则表达式将链接分割到它的组件。
从mailto链接中删除实际的电子邮件地址，并使用Django的EmailValidator验证它。

注意，我们还添加了一种名为InvalidMarkdown的新异常类型。我们定义了自己的自定义异常类型，以将它与markdown本身所引发的其他错误区分开来。

自定义错误类
我曾经写过关于自定义错误类的文章，为什么它们是有用的，以及你什么时候应该使用它们。

在我们继续之前，让我们添加一些测试，看看它的实际效果:

太棒了！按预期的运行了。

处理内部和外部链接

既然我们已经了解了mailto链接，我们也可以处理其他类型的链接:

外部链接

我们的Django应用程序外部的链接。
必须包含一个页面跳转协议（scheme）:http或https。
理想情况下，我们还希望确保这些链接没有被破坏，但我们现在不会这样做。

内部链接

到我们的Django应用程序中的页面的链接。
链接必须是相对的:这将允许我们在不同环境之间移动内容。
使用Django的URL名称而不是一个URL路径:这将允许我们安全地来回移动视图，而不必担心markdown内容中的失效链接。
链接可能包含查询参数(?)和片段(#)。

SEO
从SEO的角度来看，公共URL不应该改变。当他们这样做的时候，你应该使用重定向正确地处理它，否则你可能会受到搜索引擎的惩罚。

有了这个需求列表，我们就可以开始工作了。

解析URL名称

要链接到内部页面，我们希望编写者提供一个URL名称，而不是URL路径。例如，假设我们有这个视图:

这个页面的URL路径是https://example.com/， URL名称是home。我们想要在我们的markdown链接中使用这个URL名称home，就像这样:

这将渲染到:

我们还想支持查询参数和散列：

这将渲染到以下HTML：

在使用URL名称时，如果我们更改了URL路径，内容中的链接将不会被破坏。要检查作者提供的href是否是一个有效的url_name，我们可以尝试reverse它:

URL名称“home”指向URL路径“/”。当没有匹配项时，将会引发一个异常:

在我们继续之前，当URL名称包含查询参数或散列时，会发生什么:

这是有意义的，因为查询参数和散列不是URL名称的一部分。

要使用reverse并支持查询参数和散列，我们首先需要清除值。然后，检查它是一个有效的URL名称，并返回包含查询参数和散列的URL路径，如果提供了的话:

这个代码段使用一个正则表达式来以？或#的出现对href进行分割，并返回各部分。

请确保它可以工作:

太了不起了!作者们现在可以在Markdown中使用URL名称了。它们还可以包括要添加到该URL的查询参数和片段。

处理外部链接

要正确处理外部链接，我们需要检查两件事:

1.外部链接总是提供一个跳转协议，http:或者https:。

2.阻止到我们自己网站的绝对链接。内部链接应该使用URL名称。

到目前为止，我们已经处理了URL名称和mailto链接。如果我们通过了这两个检查，这意味着href是一个URL。让我们从检查链接是否是链接到我们自己的网站开始:

函数urlparse会返回一个命名元组，该元组包含URL的不同部分。如果netloc属性等于site_domain，那么该链接就确实是一个内部链接。

如果URL实际上是内部的，我们就需要终止。但是，请记住，作者们不一定是技术人员，因此我们希望帮助他们，并提供一个有用的错误消息。我们要求该内部链接使用URL名称而不是URL路径，所以最好让作者们知道他们提供的路径的URL名称。

要获得一个URL路径的URL名称，Django为我们提供了一个名为resolve的函数:

当找到匹配项时，resolve会返回一个ResolverMatch对象，其中包含URL名称和其他信息。当没有找到匹配项时，它就会引发一个错误:

这实际上就是Django在底层所做的工作，用来确定在一个新请求到来时执行哪个视图函数。

为了给作者们提供更好的错误信息，我们可以使用来自ResolverMatch对象的URL名称:

当我们识别出内部链接时，我们要处理两种情况:

我们没有识别出这个URL:这个URL很可能是不正确的。请作者检查该URL是否有错误。
我们识别出了这个URL: 这个URL是正确的，所以就告诉作者应该使用什么URL名称。

我们来实际地看一下它:

漂亮!外部链接被接受，内部链接被拒绝，并带有一个有用的消息。

要求跳转协议

我们要做的最后一件事是确保外部链接包含一个跳转协议，要么是http:，要么是https:。让我们将这最后一部分添加到函数clean_link:

使用解析后的URL，我们可以很容易地检查跳转协议。让我们确保它正在工作:

我们向这个函数提供了一个没有跳转协议的链接，但是它运行失败了，并显示了一条有用的消息。太酷了!

整合代码

这是clean_link函数的全部代码：

要了解所有这些特性的一个实际用例是什么样子的，请看下面的内容:

这将产生以下HTML:

不错!

结论

我们现在有一个很不错的扩展，它可以验证和转换Markdown文档中的链接!现在，在不同环境之间移动文档和保持内容整洁要容易多了，最重要的是，可以保持正确和最新!

源码
你可以在这个gist中找到全部源代码。（地址：https://gist.github.com/hakib/73fccc340e855bb65f42197e298c0c7d ）

题外话

本文中所描述的功能对我们很有用，但是你可能需要根据自己的需求对它进行调整。

如果你需要一些想法，那么除了这个扩展之外，我们还创建了一个markdown Preprocessor，它允许作者们在markdown中使用常量。例如，我们定义了一个名为SUPPORT_EMAIL的常量，我们像这样使用它:

该预处理程序将用我们定义的文本替换字符串$SUPPORT_EMAIL，然后才渲染Markdown。

英文原文：https://hakibenita.com/django-markdown
译者：Nothing

在线咨询

上一篇：数学中最优雅的欧拉公式-更好的解释（数学篇）11
下一篇：JavaScript（7）基础完结篇

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商