相信很多小伙伴和我一样, 写博客, 能用 Markdown 就绝不用富文本, Markdown 有很多好处, 比如: 可以快速迁移
迁移前: 简书链接
迁移后: 方圆小站链接
这次教大家如何批量迁移简书的 Markdown 到自己的网站
迁移后的效果展示 (GIF 效果图)
链接地址: https://fangyuanxiaozhan.com/ (欢迎访问, 哈哈!)
第一步: 从简书后台下载文章, 并解压
第二步: 将文件夹
Chrome 插件英雄榜
放入项目静态文件目录下, 完成 python 读取 md 文档的逻辑
放入 django 静态目录
django 处理函数
- ## 文章页面
- def article(request):
- # 添加目录
- blog_md_list = []
- for relative_file_dir_path, file_dir_name, file_name in os.walk(BASE_DIR+"/webStatic/blog-md"):
- # print("当前文件夹路径 (字符串)", relative_file_dir_path)
- # print("当前文件夹目录下包含的文件夹 (数组)", file_dir_name)
- # print("当前文件夹目录下包含的文件名 (数组)", file_name)
- for file in file_name:
- if(file.startswith('.') == False):
- title = file[:-3]
- blog_md_list.append({"file_path": relative_file_dir_path+"/"+file, "title": title})
- # 正文
- md_path = request.path.lstrip('/blog/article/')
- # 获取文章标题
- md_title = md_path.split('/')[-1][:-3]
- md_txt = {"md": ''}
- with open("/"+md_path, 'r') as f:
- md_txt = {"md": f.read()}
- return render(request, "blog/page.html",locals())
第三步: 完成前端页面的渲染逻辑:
核心代码
- <!DOCTYPE HTML>
- <HTML lang="en">
- <head>
- <meta charset="UTF-8">
- <title>
- {{md_title}}
- </title>
- <script src="https://cdnjs.cloudflare.com/ajax/libs/showdown/1.9.0/showdown.min.js">
- </script>
- </head>
- <body>
- <style>
- img{ width: 80%; }
- </style>
- <div id="result">
- </div>
- <script type="text/javascript">
- (function convert(md_txt) {
- var text = md_txt;
- var converter = new showdown.Converter();
- var HTML = converter.makeHtml(text);
- document.getElementById("result").innerHTML = HTML;
- })({
- {
- md_txt | safe
- }
- } ["md"]);
- </script>
- </body>
- </HTML>
小结:
由于篇幅原因, 上面只是放上了前端和后端的核心处理逻辑, 前端的页面样式, 可以访问 https://fangyuanxiaozhan.com 进行查看, 前端是开源的, 打开 Chrome 开发者工具, 什么都有了, 当然对以上步骤有疑问, 可以在下方给我留言, 我会及时解答~
来源: http://www.jianshu.com/p/a7ead701ca1d