<< Node.js(Pug)入門編その3 | main | Node.js(Express)入門編その5 >>

Node.js(Pug)入門編その4

 

前回からの続きです。

 

前回作った、index2.pugをnode.jsで動かしてみます。

 

doctype html
html(lang="ja")
    head
        meta(charset="utf-8")
        title pugでタイトル
    body
        h1 pugで見出し
        p pugでこんにちわ

をファイル名をindex.pugで保存してください。

また、

'use strict';
var http = require('http');
var port = process.env.PORT || 1337;
var pug = require('pug');

var server = http.createServer(getcliant);
server.listen(port);

// サーバの処理
function getcliant(_req, res) {
    res.writeHead(200, { 'Content-Type': 'text/html;charset=UTF-8' });
    res.write(pug.renderFile('index.pug',{}));
    res.end();
}

をファイル名をmain-app.jpで保存してください。

 

 

4行目で

var pug = require('pug');

でpugを使えるようにします。

12行目で

    res.write(pug.renderFile('index.pug',{}));

index.pugファイルのテンプレートを読み書き換えています。

 

VScodeのメニューバーのデバッグからデバッグなしで実行すれば、

 

 

プラウザ(URL)localhost:1337/で表示されます。

 

参考に、スタイルシートを使った例を載せておきます。

 

ファイル名:index.pug

doctype html
html(lang="ja")
    head
        meta(charset="utf-8")
        title pugでタイトル
        style.
            h1{font-size: 24px;color: red;}
            p{font-size: 20px;color: blue;}

    body
        h1 pugで見出し
        p pugでこんにちわ

styleにドット[.]を付けてブロックで指定できます。

文字サイズと文字色を変えてます。

 

 

ついでに、pugでは、変数も使えます。

 

変数の書き方は、#{変数名}です。

 

たとえば、

index.pug

doctype html
html(lang="ja")
    head
        meta(charset="utf-8")
        title #{name_title}
    body
        h1 #{name_headline}
        p こんにちわ、変数の設定です。

として、

 

main-app.js

'use strict';
var http = require('http');
var port = process.env.PORT || 1337;
var pug = require('pug');

var server = http.createServer(getcliant);
server.listen(port);

// サーバの処理
function getcliant(_req, res) {
    res.writeHead(200, { 'Content-Type': 'text/html;charset=UTF-8' });
    res.write(pug.renderFile('index.pug',{
        name_title: 'こんにちわ',
        name_headline: '変数のタイトル名'
    }));
    res.end();
}

name_title: 'こんにちわ',

name_headline: '変数のタイトル名'

とすれば、

 

 

となります。

 

最後に、フレームワークexpressに行く前に、ルーティングを覚えておきましょう。

HTMLを書くときに、CSS(スタイルシート)を外部に置いてリンクするのが一般的です。

しかし、単にリンクしても、Node.jsではHTMLにCSSは反映されません。

 

これまででは、プラウザ(クライアント)からサーバ(node.js)がリクエストを受けているのは、

(URLの)localhost:1337(/index.html)だけです。

外部にCSSを置こうとすると、(ファイル名style.css)

index.htmlの<head>に

<link type="text/css" href="./style.css" rel="stylesheet">

とコードし、

(サーバに)localhost:1337/syle.css

にもリクエスト(リンク)しなければなりません

 

逆に言えば、サーバ(node.js)はindex.htmlに対するレスポンスしか持っていません

 

そこで、URLを解析して、pathnameを判別するためurlというモジュールを使います。

 

var url = require("url");

 

ファイル名:style.css

h1 {
    font-size: 20px;
    color: brown;
}
p {
    font-size: 16px;
    color: blue

で、外部CSSを作り

 

ファイル名:index.pug

doctype html
html(lang="ja")
    head
        meta(charset="utf-8")
        title #{name_title}
        link(rel="stylesheet", href="./style.css")
    body
        h1 #{name_headline}
        p こんにちわ、CSSのテストです。

にスタイルシートのlink(rel="stylesheet", href="./style.css")をつけて

 

ファイル名:main-app.js

'use strict';
var http = require('http');
var pug = require('pug');
var fs = require('fs');
var url = require('url');
var port = process.env.PORT || 1337;

var index_page = fs.readFileSync('./index.pug','utf8');
var style_css = fs.readFileSync('./style.css','utf8');

var server = http.createServer(getcliant);
server.listen(port);

console.log('Server start');

// サーバの処理
function getcliant(_req, res) {
    var url_p = url.parse(_req.url);
    switch (url_p.pathname){
        case '/':
            res.writeHead(200, { 'Content-Type': 'text/html;charset=UTF-8' });
            res.write(pug.render(index_page,{
                name_title: 'こんにちわ',
                name_headline: 'タイトル名'
            }));
            res.end();
            break;

        case '/style.css':
            res.writeHead(200,{'Content-Type': 'text/css'});
            res.write(style_css);
            res.end();
            break;

        default:
            res.writeHead(200,{'Content-Type': "text/plain"});
            res.end('There is no page');
            break;    
    }
}

にlocalhost:1337/syle.cssのレスポンスを書き加えます。

 

プログラミングの説明は、

 

次回に続きます。

 

 

 

 

JUGEMテーマ:プログラミング

| JavaScript | 18:51 | comments(0) | trackbacks(0) |
Comment









Trackback
url: トラックバック機能は終了しました。

08
--
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
--
>>
<<
--
Profile
New entries
Archives
Categories
Recent comment
カウンター


今日
昨日
レンタルサーバ/プロバイダー




ファッション
カタログ通販ベルーナ(Belluna)

イマージュ - IMAGEアウトレットセール
yahoo・その他


買い物
ビックカメラ.com



Mobile
qrcode
Links
Others
無料ブログ作成サービス JUGEM