导入bootstrap，分离视图

JacksonTian · Feb 11, 2014 · 2c2df80 · 2c2df80
1 parent d5b5b66
commit 2c2df80
Show file tree

Hide file tree

Showing 23 changed files with 8,604 additions and 30 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,2 +1,3 @@
 node_modules
 wwwroot
+.DS_Store
diff --git a/bin/build b/bin/build
@@ -1,6 +1,6 @@
 #!/usr/bin/env node
 
-
+var cwd = process.cwd();
 
 var fs = require('fs');
 var path = require('path');
@@ -16,32 +16,51 @@ marked.setOptions({
   }
 });
 
-var docdir = path.join(__dirname, '../doc');
-var htmldir = path.join(__dirname, '../wwwroot/articles');
+var extend = function () {
+  var ret = {};
+  for (var i = 0; i < arguments.length; i++) {
+    var obj = arguments[i];
+    for (var key in obj) {
+      ret[key] = obj[key];
+    }
+  }
+  return ret;
+};
+var pkg;
+try {
+  pkg = require(path.join(cwd, 'column.json'));
+} catch (ex) {
+  console.log('column.json 文件有误');
+  process.exit(1);
+}
+
+var docdir = path.join(cwd, 'doc');
+var htmldir = path.join(cwd, 'articles');
 mkdirp.sync(htmldir);
 
-var tpldir = path.join(__dirname, '../tpl');
-var assetdir = path.join(__dirname, '../wwwroot/assets');
+var assetdir = path.join(cwd, 'assets');
 mkdirp.sync(assetdir);
 
+var tpldir = path.join(__dirname, '../tpl');
+var articleTpl = fs.readFileSync(path.join(tpldir, 'article.tpl'), 'utf-8');
+var homeTpl = fs.readFileSync(path.join(tpldir, 'index.tpl'), 'utf-8');
+
+// filter markdown files
 var files = fs.readdirSync(docdir);
 var markdowns = files.filter(function (filename) {
   var ext = path.extname(filename);
   return ext === '.md';
 });
-
-var articleTpl = fs.readFileSync(path.join(tpldir, 'article.tpl'), 'utf-8');
-var homeTpl = fs.readFileSync(path.join(tpldir, 'index.tpl'), 'utf-8');
-
 markdowns.forEach(function (filename) {
   var markdown = path.join(docdir, filename);
   var html = marked(fs.readFileSync(markdown, 'utf-8'));
 
   var basename = path.basename(filename, path.extname(filename));
-  var output = ejs.render(articleTpl, {
+  var output = ejs.render(articleTpl, extend({
     title: filename,
-    html: html
-  });
+    html: html,
+    filename: '../tpl/article.tpl'
+  }, pkg));
 
   var article = path.join(htmldir, basename + '.html');
   fs.writeFileSync(article, output);
@@ -54,9 +73,10 @@ var articles = markdowns.map(function (filename) {
 });
 
 var home = path.join(htmldir, '../index.html');
-fs.writeFileSync(home, ejs.render(homeTpl, {
-  articles: articles
-}));
+fs.writeFileSync(home, ejs.render(homeTpl, extend({
+  articles: articles,
+  filename: '../tpl/index.tpl'
+}, pkg)));
 
 console.log(markdowns);
 

diff --git a/tpl/article.tpl b/tpl/article.tpl
@@ -1,10 +1,47 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
   <head>
-    <title><%=title%></title>
-    <link rel="stylesheet" href="../assets/github.css">
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="description" content="">
+    <meta name="author" content="">
+    <link rel="shortcut icon" href="/assets/ico/favicon.ico">
+
+    <title><%=title%> | Column</title>
+    <!-- Bootstrap core CSS -->
+    <link href="/assets/bootstrap-3.1.0/css/bootstrap.min.css" rel="stylesheet">
+    <!-- Custom styles for this template -->
+    <link href="/assets/styles/github.css" rel="stylesheet">
+    <link href="/assets/styles/column.css" rel="stylesheet">
   </head>
-  <body>
-    <%-html%>
+
+  <body id="article">
+    <% include navbar.tpl %>
+
+    <div class="container">
+      <div class="column-header">
+        <h1 class="column-title">Column</h1>
+        <p class="lead column-description">磕首问路，码梦为生</p>
+      </div>
+
+      <div class="row">
+        <div class="col-sm-8 blog-main">
+          <div class="artilce">
+            <%-html%>
+          </div>
+          <% include disqus.tpl %>
+        </div>
+        <div class="col-sm-3 col-sm-offset-1 column-sidebar">
+          <% include sidebar.tpl %>
+        </div>
+      </div>
+    </div><!-- /.container -->
+
+    <!-- Bootstrap core JavaScript
+    ================================================== -->
+    <!-- Placed at the end of the document so the pages load faster -->
+    <script src="/assets/scripts/jquery-1.10.2.min.js"></script>
+    <script src="/assets/bootstrap-3.1.0/js/bootstrap.min.js"></script>
   </body>
 </html>