添加网站 title，主标题，副标题的配置功能和文档说明

xiaoqiang-zhao · Dec 31, 2015 · 6ad1078 · 6ad1078
1 parent 8bbadaa
commit 6ad1078
Show file tree

Hide file tree

Showing 11 changed files with 44 additions and 24 deletions.
diff --git a/README.md b/README.md
@@ -1,6 +1,6 @@
 # cellar 2.0
 
-cellar中文意思酒窖，希望这里的每一篇博文都是一瓶美酒佳酿，这是建立这个项目的美好愿景。
+> cellar中文意思酒窖，希望这里的每一篇博文都是一瓶美酒佳酿，这是建立这个项目的美好愿景。
 
 ## 项目概述
 
@@ -20,18 +20,28 @@ cellar中文意思酒窖，希望这里的每一篇博文都是一瓶美酒佳
 
     node tool/init-site
 
-- 发布到哪里？可以在 tool/init-site/bin/config.js 中配置 publicSitePath 字段，相对和本地绝对路径都可以；
+- 发布到哪里？可以在 cellar/tool/init-site/bin/config.js 中配置 publicSitePath 字段，相对和本地绝对路径都可以。默认发布到与 cellar 同层目录的 my-blog 文件夹下；
 
 - 本地预览，运行下面命令发布(依然在本项目根路径下运行)
 
     node server
 
+- 终于看到自己的博客了，但是头像和网站标题都需要换，在 cellar/web/src/components/header/header.tpl 中换网站标题，与之同级的 picture.png 就是头像，请同名替换。博客的 title 在 cellar/tool/init-site/bin/config.js 中配置 title 字段进行配置。然后在 cellar/tool 下执行
+
+	webpack -p
+
 - 发布到线上，你可以把生成的静态博客放在自己的服务器上，也可以在 github 上开通自己的站点，上传文件就可以显示。效果参考[本开源项目发起人的个人站点](https://longze.github.io)。
 
+## 本工具的原理介绍
+
+待续...
+
 ## TODOs
 
 这是一个幼小的开源项目，还有很多需要完善的地方，如果你感兴趣，我们可以一起来做这件有意思的事情，下面是我想做还没来得及做的一些改进点，欢迎贡献代码。如果你建议添加一些其他功能，请在 Issues 中提出方便管理。如果你想吐槽我的代码也是乐于受教的，同样在 Issues 中提出。
 
 - css 预处理
 
-- 将 webpack 的压缩集成在 init-site 中
+- 将 webpack 的压缩集成在 init-site 中
+
+- 优化 webpack 的配置
diff --git a/tool/init-site/lib/config.js b/tool/init-site/lib/config.js
@@ -31,7 +31,17 @@ var config = {
     // html文件文件名
     htmlFileFilename: 'main.html',
     // 公开网站的路径
-    publicSitePath: '/../../my-blog'
+    publicSitePath: '/../../my-blog',
+
+    // 网站的配置
+    siteData: {
+        // 网页的 title
+        title: '网站 title',
+        // 网站的主标题
+        mainHead: '网站的主标题',
+        // 网站的副标题
+        subhead: '网站的副标题'
+    }
 };
 
 module.exports = config;
diff --git a/tool/init-site/lib/init-article-detail-page.js b/tool/init-site/lib/init-article-detail-page.js
@@ -26,7 +26,8 @@ function initArticleDetail (articleArr) {
         var articleDetailPageHtml = ejs.render(articleDetailTemplateStr, {
             title: article.jsonData.title,
             content: markedData.htmlContent,
-            headerTree: markedData.headerTree[0]
+            headerTree: markedData.headerTree[0],
+            siteData: config.siteData
         });
         var articleDetailFilePath = article.detailFilePath;
 

diff --git a/tool/init-site/lib/init-index-page.js b/tool/init-site/lib/init-index-page.js
@@ -27,7 +27,8 @@ function initPage(articleArr) {
     var indexHtml = ejs.render(
         indexTemplate,
         {
-            articleArr: articleArr
+            articleArr: articleArr,
+            siteData: config.siteData
         }
     );
     var indexPagePath = config.rootPath + config.indexPagePath;

diff --git a/tool/init-site/lib/init-json-data.js b/tool/init-site/lib/init-json-data.js
@@ -15,7 +15,7 @@ var defaultJson = {
     "tags": [              // 文章标签
         "基础"
     ],
-    "isPublished": false,  // 是否处于发布状态
+    "isPublished": true,   // 是否处于发布状态
     "state": "立项",        // 文章状态
                            // 立项,[腹稿中],[资料收集中],[自我持续集成中],[公示持续集成中],[完结],
                            // [修正添加中]

diff --git a/web/article-detail-template.html b/web/article-detail-template.html
@@ -3,7 +3,7 @@
 <head lang="zh-cn">
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
-    <title><%-title%> - 龙则的博客站点</title>
+    <title><%-title%> - <%=siteData.title%></title>
     <script>
         // 用户通过搜索引擎到文章详情页时，跳到首页并进行哈希路由
         var href = window.location.href.replace(/[^:|\/]\//,function (matchStr){
@@ -15,11 +15,10 @@
 <body>
 <header>
     <h1>
-        龙则个人站点
+        <%=siteData.mainHead%>
     </h1>
-
     <h2>
-        记录工作与生活的所得所感
+        <%=siteData.subhead%>
     </h2>
 </header>
 <div>

diff --git a/web/articles/webstorm/main.html b/web/articles/webstorm/main.html
@@ -3,7 +3,7 @@
 <head lang="zh-cn">
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
-    <title>WebStorm 使用文档 - 龙则的博客站点</title>
+    <title>WebStorm 使用文档 - 网站 title</title>
     <script>
         // 用户通过搜索引擎到文章详情页时，跳到首页并进行哈希路由
         var href = window.location.href.replace(/[^:|\/]\//,function (matchStr){
@@ -15,11 +15,10 @@
 <body>
 <header>
     <h1>
-        龙则个人站点
+        网站的主标题
     </h1>
-
     <h2>
-        记录工作与生活的所得所感
+        网站的副标题
     </h2>
 </header>
 <div>

diff --git a/web/dist/main.js b/web/dist/main.js
diff --git a/web/index-template.html b/web/index-template.html
@@ -3,18 +3,18 @@
 <head lang="zh-cn">
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
-    <title>龙则的博客站点</title>
+    <title><%=siteData.title%></title>
 </head>
 <body>
 <script src="dist/main.js"></script>
 <!-- 给搜索引擎看的 -->
 <noscript>
     <header>
         <h1>
-            龙则个人站点
+            <%=siteData.mainHead%>
         </h1>
         <h2>
-            记录工作与生活的所得所感
+            <%=siteData.subhead%>
         </h2>
     </header>
     <div>

diff --git a/web/index.html b/web/index.html
@@ -3,18 +3,18 @@
 <head lang="zh-cn">
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
-    <title>龙则的博客站点</title>
+    <title>网站 title</title>
 </head>
 <body>
 <script src="dist/main.js"></script>
 <!-- 给搜索引擎看的 -->
 <noscript>
     <header>
         <h1>
-            龙则个人站点
+            网站的主标题
         </h1>
         <h2>
-            记录工作与生活的所得所感
+            网站的副标题
         </h2>
     </header>
     <div>

diff --git a/web/src/components/header/header.tpl b/web/src/components/header/header.tpl
@@ -1,7 +1,7 @@
 <header class="page-header">
     <h1>
-        <span class="main-title">龙则的个人站点</span>
-        <span class="subtitle">记录我在北京的生活与感悟，记录在某大公司的技术(主要是前端)研究</span>
+        <span class="main-title">网站的主标题</span>
+        <span class="subtitle">网站的副标题</span>
     </h1>
     <nav class="nav">
         <button class="icon-menu-button"></button>