網站重構——輕量化的網站架構設計四markdown angular
阿新 • • 發佈：2019-02-07
因為再有的部落格基本上是用markdown寫的，所以需要將markdown寫的部落格轉為html，再丟給angular處理。
簡單的用法就是如下面
所以我們要做的就是，宣告下markdown，再新增到app.js中(轉載保留:markdown angular,網站重構四,angularjs insert html
程式碼中添加了一個新的元素用於獲取最後的十個部落格，用的是underscore為的是以後方便，所以最後的app.js程式碼如下所示
這裡似乎需要用到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.
看程式碼:
以及HTML部分
##整合##
index.html部分
app.js部分
#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 = content[req.params.name-1]; res.json(data, {'content-type': 'application/json; charset=utf-8'}); } function all(req,res,next){ var data = {blogposts_sum:rows.length}; res.json(data, {'content-type': 'application/json; charset=utf-8'}); } function respages(req,res,next){ var data = _.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 = '<p style="color:blue">an html\n' + '<em onmouseover="this.textContent=\'PWN3D!\'">click here</em>\n' + 'snippet</p>'; $scope.deliberatelyTrustDangerousSnippet = function() { return $sce.trustAsHtml($scope.snippet); }; }
以及HTML部分
<pre><div ng-bind-html="deliberatelyTrustDangerousSnippet()">##整合##
index.html部分
<!doctype html>
<html lang="en" ng-app="blogposts">
<head>
<meta charset="utf-8">
<title>Phodal's New Homepage</title>
<script src="js/angular.min.js"></script>
<script src="js/app.js"></script>
</head>
<body ng-controller="postlistCtrl">
<div class="container-fluid">
<div class="row-fluid">
<div class="span10">
<ul class="posts">
<article ng-repeat="post in posts">
<h1>{{post.title}}</h1>
<p>{{post.description}}</p>
</article>
<article>
<div ng-bind-html="deliberatelyTrustDangerousSnippet()"></div>
</article>
</ul>
</div>
</div>
</div>
</body>
</html>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);
};
});
});