网站重构|网站重构——轻量化的网站架构设计四markdown angular
因为再有的博客基本上是用markdown写的，所以需要将markdown写的博客转为html，再丢给angular处理。
#Markdown Markdown 是一种轻量级标记语言，创始人为约翰·格鲁伯（John Gruber）和亚伦·斯沃茨（Aaron Swartz）。它允许人们“使用易读易写的纯文本格式编写文档，然后转换成有效的XHTML(或者HTML)文档”。这种语言吸收了很多在电子邮件中已有的纯文本标记的特性。
安装markdown js
npm install markdown简单的用法就是如下面
var markdown = require( "markdown" ).markdown;
console.log( markdown.toHTML( "Hello *World*!" ) );
所以我们要做的就是，声明下markdown，再添加到app.js中(转载保留: markdown angular,网站重构四,angularjs insert html
content:markdown.toHTML(row.content),
代码中添加了一个新的元素用于获取最后的十个博客，用的是underscore为的是以后方便，所以最后的app.js代码如下所示
var restify = require('restify');
var _ = require('underscore')._;
var sqlite3 = require('sqlite3').verbose();
var markdown = require( "markdown" ).markdown;
var db = new sqlite3.Database('sqlite3.db');
var server = restify.createServer();
var content = new Array();
server.use(
function crossOrigin(req,res,next){
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", "X-Requested-With");
return next();
}
);
db.all("SELECT id,content,title,description,slug,created,updated,publish_date,keywords_string FROM blog_blogpost", function(err, rows) {
rows.forEach(function (row) {
content.push({
id:row.id,
slug:row.slug,
description:row.description,
title:row.title,
content:markdown.toHTML(row.content),
keywords:row.keywords_string,
created:row.created,
updated:row.updated,
publish_date:row.publish_date
});
});
function respond(req,res,next){
var data = https://www.it610.com/article/content[req.params.name-1];
res.json(data, {'content-type': 'application/json;
charset=utf-8'});
}
function all(req,res,next){
var data = https://www.it610.com/article/{blogposts_sum:rows.length};
res.json(data, {'content-type': 'application/json;
charset=utf-8'});
}
function respages(req,res,next){
var data = https://www.it610.com/article/_.last(content,10);
data = data.reverse();
res.json(data, {'content-type': 'application/json;
charset=utf-8'});
}
server.get ('/blog',all);
server.get ('/blog/page/:page',respages);
server.head ('/blog/page/:page',respages);
server.get ('/blog/:name',respond);
server.head ('/blog/:name',respond);
db.close();
});
server.listen(10086, function() {
console.log('%s listening at %s', server.name, server.url);
});
Angularsjs 插入html ng-bind-html
这个指令要引入sanitize 模块
这里似乎需要用到trustAsHtml()这个神奇的东东，看看官方是怎样示例的 $sanitize
The input is sanitized by parsing the html into tokens. All safe tokens (from a whitelist) are then serialized back to properly escaped html string. This means that no unsafe input can make it into the returned string, however, since our parser is more strict than a typical browser parser, it's possible that some obscure input, which would be recognized as valid HTML by a browser, won't make it through the sanitizer.
看代码:
function Ctrl($scope, $sce) {
$scope.snippet =
'an html\n' +
'click here\n' +
'snippet
';
$scope.deliberatelyTrustDangerousSnippet = function() {
return $sce.trustAsHtml($scope.snippet);
};
}以及HTML部分
##整合##
index.html部分
Phodal's New Homepage {{post.title}}【网站重构|网站重构——轻量化的网站架构设计四markdown angular】{{post.description}}
app.js部分
var blogposts = angular.module('blogposts', []);
blogposts.controller('postlistCtrl', function($scope, $http, $sce) {
$http.get('http://0.0.0.0:10086/blog/page/1').success(function(data) {
$scope.posts = data;
});
$http.get('http://0.0.0.0:10086/blog/1').success(function(data) {
$scope.post1 = data;
console.log(data.content);
$scope.deliberatelyTrustDangerousSnippet = function() {
return $sce.trustAsHtml(data.content);
};
});
});
推荐阅读
- 急于表达——往往欲速则不达
- 慢慢的美丽
- 《真与假的困惑》???|《真与假的困惑》??? ——致良知是一种伟大的力量
- 2019-02-13——今天谈梦想（）
- 考研英语阅读终极解决方案——阅读理解如何巧拿高分
- Ⅴ爱阅读，亲子互动——打卡第178天
- 低头思故乡——只是因为睡不着
- 取名——兰
- 每日一话（49）——一位清华教授在朋友圈给大学生的9条建议
- 广角叙述|广角叙述 展众生群像——试析鲁迅《示众》的展示艺术