网站重构——轻量化的网站架构设计四markdown angular

浏览数：30 / 时间：2015年06月09日

因为再有的博客基本上是用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 = 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);
          };
      });
  });

网站重构——轻量化的网站架构设计四markdown angular,古老的榕树,5-wow.com

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

网站重构——轻量化的网站架构设计四markdown angular