nodeでjs建ブログ(二)-最初のmarkdownページを構築

9539 ワード

上の文章『NodeBlog(一)-node.jsインストールおよびExpressフレームワークの概要』では準備ができています.次に、最初のブログを迅速に構築する必要があります.もちろん、このブログはmarkdownに基づいて文法に基づいています.
Markdown構文のCheatsSheet添付ファイルはダウンロードされています.
http://dl.iteye.com/topics/download/2cca1dea-14a2-35d5-bb05-78e03a87b437
 
1.プロジェクトにmarkdown-js依存を追加し、markdown解析能力を追加する:
expressはmarkdown構文を直接サポートするものではなく、プロジェクトにmarkdown-jsモジュールの依存を追加する必要がある.
まずexpressプロジェクト構造を振り返ってみましょう.
 
Expressディレクトリ構造t-1
ディレクトリ/ファイル
説明
./
ルートディレクトリ、私たちのnode.jsコードはすべてこのディレクトリになります
 package.json
npm依存プロファイルはrubyのGemfile,java Mavenのpomに類似する.xmlファイルここでmarkdown-jsプロジェクト依存を追加する必要があります
 app.js
プロジェクトのエントリファイル
 public/ javascript/ stylesheets/ images/
静的リソースファイルを保存するjquery/prettify.jsなどの静的ライブラリの会方はこちら、もちろん自分で書いたフロントエンドコードもこちらに置いてもいいです
 views/
テンプレートファイル、expressのデフォルトはjadeです.もちろん、自分の好きなhaml、JES、coffeeKup、jQueryTemplateなどのテンプレートエンジンも使用できます.
 node_modules/
npmを格納ローカル依存パケットにインストールし、packageに依存パケットをインストールする.jsonファイルで宣言し、npm installコマンドを使用してインストール
ここではpackageを修正します.jsonファイル、依存関係を追加するには:
元packagejsonファイル
 
{
    "name": "application-name"
  , "version": "0.0.1"
  , "private": true
  , "dependencies": {
      "express": "2.4.6"
    , "jade": ">= 0.0.1"
  }
}

 
次のように変更します.
 
{
    "name": "nodeblog"
  , "version": "0.0.1"
  , "private": true
  , "dependencies": {
      "express": "2.4.6"
    , "jade": ">= 0.0.1"
    , "markdown-js": ">= 0.0.1"
  }
}

 
name:appの名前を指定します.
dependesies:で依存ライブラリを定義し、markdown-jsへの依存を追加します.
private:npmグローバルウェアハウスにプログラムをパブリッシュするかどうかを設定します.
 
npmを使用して依存性をインストールするには、次の手順に従います.
$ npm installl
 
コンソール書き込み
[email protected] ./node_modules/markdown-js
└── [email protected]
 
ここで./node_modulesディレクトリの下にmardown-jsディレクトリが1つ追加されます
 
用node.js建博客(二) - 构建第一个markdown页面
 
ここで符号化を開始するには、適切なエディタを選択する必要があります.
xVim:
gVim/MacVimは、プラグインを自分で構成する必要があります.以下、個人的にお勧めします.
  • NERDTree:http://www.vim.org/scripts/script.php?script_id=1658、フォルダナビゲーションを提供し、eclipseのプロジェクトview
  • Snippets:http://www.vim.org/scripts/script.php?script_id=2540、VimにTextMateにおけるTab補完機能
  • をサポートさせる
  • jade:https://github.com/digitaltoad/vim-jade、Vim私はまだこのプラグインをインストールしていません

  • TextMate:
    デフォルトではmarkdown構文のサポート、jade、nodeが提供されます.jsはbundlesをインストールする必要があります
  • jade: https://github.com/miksago/jade-tmbundle
  • Node.js: https://github.com/drnic/javascript-node.tmbundle

  •  
    2.ExpressにMarkdownをサポートさせる:
    appを開きます.jsはnodeの作成を開始する.jsコード、何も書かない前のapp.jsは大体以下の通りです.
     
    var express = require('express');
    var app = module.exports = express.createServer();
    
    app.configure(function(){
      // set some config
    });
    
    app.get('/', function(req, res){
      res.render('index', {
        title: 'Express'
      });
    });
    
    app.listen(3000);

     
    最初の行はexpressモジュールをインポートし、javaのimport[packagename]と理解できます.この構文を使用してmarkdown-jsモジュールモジュールをインポートする必要があります.
    (node.jsのモジュール管理はCommonJS仕様に基づいており、詳細はCommonJS Wiki参照.)
     
    markdownモジュールのインポート:
     
    var express = require('express');
    var markdown = require('markdown-js');
    
    var app = module.exports = express.createServer();
    
    // ... some code
    
    app.listen(3000);

     
     
    ここまではexpressでmarkdown形式の文字をレンダリングすることができます(このように簡単ですか?はい、これは最も簡単な場合です).例を書いてみましょう
    まずurlを設計します
    URLアドレス
    説明
    /markdown
    ユーザーがブラウザからこのページにアクセスすると、JavaEyeへのハイパーリンクが出力されます.markdown文字列:
    [Java Eye](http://www.iteye.com/ "Click")
    で生成されたhtmlコード:JavaEye  
    http://localhost:3000/
    appです.jsは次のコードを追加します.
    app.get('/markdown', function(req, res) {
        var html = markdown.makeHtml("[Java Eye](http://www.iteye.com/ \"Click\") ");
        res.send(html)
        res.end();
    })

     
    markdown.markHtml(); markdown形式の文字をHtmlに変換し、
    (markdown文法とは何ですか?ここを見てください:
    http://qingbo.net/picky/502-markdown-syntax.html )
    appを実行するには:
    $ node app.js
    ブラウザでのアクセス
    http://localhost:3000/markdown/
    用node.js建博客(二) - 构建第一个markdown页面
    ここまで、expressでmarkdown文字をレンダリングすることは基本的に実装されています.もちろんこれは明らかに私たちの要求を満たすことができません.次は続けます.
    3.Expressにmarkdownファイルをレンダーさせる
    app.jsでは、expressにmdレンダラーを登録します:(Express 2.x、メソッド、最新版3.xは適用されません-2012-09-08)
    var express = require('express');
    var markdown = require('markdown-js');
    
    var app = module.exports = express.createServer();
    
    // ... ... some configuration code
    
    app.register('.md', {
      compile: function(str, options){
        var html = markdown.makeHtml(str);
        return function(locals){
          return html.replace(/\{([^}]+)\}/g, function(_, name){
            return locals[name];
          });
        };
      }
    });
    
    app.get('/markdown', function(req, res) {
        var html = markdown.makeHtml("[Java Eye](http://www.iteye.com/ \"Click\") ");
        res.send(html);
    });
    
    app.listen(3000);

    Express 3.xにメソッドを追加:(2012-09-08)、関連コードは添付ファイルの取得
    var fs = require('fs');
    // ... 
    // Express 3.x      register  ,       flovex   
    
    app.engine('md', function(path, options, fn){
      fs.readFile(path, 'utf8', function(err, str){
        if (err) return fn(err);
        str = markdown.parse(str).toString();
        fn(null, str);
      });
    });
     
    「/markdown」urlのハンドラの変更
    app.get('/markdown', function(req, res) {
        res.render('index.md', {layout: false});
    })

    views/ディレクトリの下にindexを作成します.mdファイル
    内容は以下の通り
    This is a demo page
    ===================
    
    [Java Eye](http://www.iteye.com/ \"Click\") 

    プログラムの実行
    $ node app.js
    アクセスhttp://localhost:3000/markdown
    用node.js建博客(二) - 构建第一个markdown页面  
    OK~ここまで最初のmarkdownページが構築されています.
    しかし、今日の私のコードの速度はブログより速く、興味のある人は次のアドレスにアクセスしてこのブログを見ることができます.
    http://nodeblog.cloudfoundry.com/
    What next??
    このブログをインテリジェントにします.
  • *.mdファイルの統一管理
  • はそれを*に影射する.htmlアドレス
  • 説明の更新:
    2012-09-08
    1.Express 3を更新する.xにmarkdown解析を登録する方法.この方法は
    flovexが提供する. 
    2.新規
    mdnode_for_express3.0.zip添付ファイル、プレゼンテーションExpress 3.xにmarkdown解析器を登録する