最近上Github看見了大漠的DemoHouse項目，看到Issues說準備做一個首頁，於是我的第一想法就是做一個md列表頁面，md文件可以很容易的生成一個html文件。剛剛做好腳本文件，可以生成list.md。隨後提了pr。同時看到 @jerexyz 使用gulp構建工具做好了一個生成index.html的工具，我也就暫時放棄了繼續後面的工作，還好沒做，繼續做的話生成出來的也比較粗糙，還得再繼續美化修改。想象一下，如果這時我新收集了一個Demo，準備提交版本庫，我是不是還得先執行一下命令 node index.js 然後再添加暫存區，提交版本庫，推遠程。如何省略執行命令行這一句呢？
說到鉤子，不知道大家喜歡釣魚嗎？喜歡不喜歡應該都知道魚鉤，不知道的再看一下，魚鉤長這樣的。
這是有一期我愛發明裏面介紹的，一個釣魚狂熱愛好者發明的釣魚神器，看節目似乎很有效。通常我們見到的魚鉤就只是上半部分，這裏卻多了一個小鉤，其實他就是我們這裏準備學習的hook。
爲了達到某種效果，我們添加的一個腳本，在正常流程執行的時候觸發這個腳本（個人拙略，如有偏頗忘指出）。
git的鉤子存放在 .git/hooks 目錄下，git init 時會自動生成一些示例腳本在該目錄下，腳本都是 .simple 後綴結尾，如果需要使用的時候，重命名取消後綴即可。
這裏是希望在存入版本庫之前生成列表頁，查詢文檔發現 pre_commit 是在 鍵入提交信息前運行 。
git add demo => pre_commit => git add list.md => git commit -m 'add new demo and update list.md'
pre_commit 是一個腳本文件，由於nodejs寫好了一個腳本文件，於是添加了一個頭部，然後最後添加生成的list.md到暫存區間
git add demo => git commit -m 'add new demo and update list.md'
實際上我們的操作流程就變成如上描述的樣子。這個就是正常流程，git commit 命名回車後先執行的是 pre_commit 腳本，再存入版本庫
自動生成list.md的工作到這裏就完成了，更多的鉤子文件這裏暫時不繼續擴展了。
又看到還有一個需求就是爲每個demo添加一些其他信息，例如：分類/作者等信息。這樣 @jerexyz 的項目工具怎麼修改實現一下呢，或者說其他方案怎麼實現呢？
參考 @jerexyz 的想法與 大漠 的思路，如果要配置多項信息我想就是在每個demo下配置一個config.json文件靠譜一些。
或者像 @jerexyz 提出的直接title添加分類，方法也行，這樣存在修改index.html文件，還有就是配置信息多或者後期再增加修改就沒有配置文件方便直觀。如果在原來的工具的基礎上修改的話就需要生成幾個也買你，把分類數據統計出來，然後再爲每個分類數據生成一次頁面，最後相互調用。是不是有一種其他的方法來處理呢？恰巧最近又在學習vue，於是就準備嘗試一下。一個單頁就可以搞定，不需要每次更新前端頁面，只需要更新後端數據文件db.json即可。
在vue還是版本號1打頭的時候看過文檔，沒有實際做過demo，後面自然而然還是隻能對着文檔編碼。
一開始我是直接script編譯好的vue.js文件，然後實例化vue。也就是這樣子的
# index.html 中這樣引入vue
<script type="text/javascript" src="vue.min.js"></script>
# scirpt 標籤中這樣實例化，純純的文檔風
var vm = new Vue({
el: '#id',
data: {
message: '阿彌陀佛'
}
})這樣子沒毛病，沒有任何問題。但是對於招牌需求這個構建工具那個構建工具，還是要摸索學習學習。於是又決定嘗試一下也只是停留在文檔風的webpack。選擇它也是有原因的，因爲我重視基礎也更風啊，哈哈哈～
這裏是寫在vue2.0.0的RC版本
- 創建項目目錄（這裏其實也跟風的玩了一下yarn，但是並沒太多感受理解它的優秀，不做描述）
npm i vue-cli -g
vue init webpack demo
cd demo
npm i
npm run dev自動啓動瀏覽器打開 http://localhost:8080 頁面，展示一個vue的初始模板頁面
- 列表頁組件
不會從頭到尾手寫，還不會修改嗎？由於暫時需要實現的就是一個列表，想到的就是 `v-for="demo in demos"
# 入口文件main.js中引入了app.vue組件
# app.vue組件中包含了這裏我們需要修改的list.vue
# list.vue
/**
* 組件的三個部分（html+js+css），如果描述感覺vue就簡單了好多
* template（html或者是自定義標籤）
* script （js）
* style （css）
*/
<template>
<ol>
<li v-for="demo in demos"> {{ demo.title }} </li>
</ol>
</template>
<script>
export default {
name: 'list',
data: function() {
return {
{
title: 'title1'
},
{
title: 'title2'
}
}
}
}
</script>
<style>
ol { /**/ }
ol li { /**/ }
</style>需要注意的一點是這裏的data是一個函數，組件內的data都是函數的形式，至於爲什麼還沒去理解，先學會第一步如何使用。其實你寫成了對象形式，在開發者工具會輸出提示。
- 導入數據
準備了一個數據文件db.js，修改之前生成列表的工具，把每個demo下的配置文件讀取出來追加到db.js中。
# 以下代碼位於template中
<div class="category" data-category="demo.category" @click="getCategoryDemos"> {{demo.category}} </div>
# li標籤需要修改一下，如果newDemos存在，按照newDemos的分類數據輸出
<li v-for="demo in (newDemos || demos}}"> {{ demo.title }} </li>
# 以下代碼位於script中
# 導入db.js
import demos from './db'
data: function() {
return {
demos: demos,
newDemos: ''
}
}
# 如果要分類顯示呢
# 添加一個方法
methods: {
getCategoryDemos: function(e) {
var newDemos = [];
this.demos.forEach(function(demo) {
if(demo.category === e.target.dataset.category) {
newDemos.push(demo);
}
})
this.newDemos = newDemos;
}
}- 顯示全部
上面取巧式的把分類數據實現了，如果要顯示全部呢？即回到首頁。把newDemos的值設爲空不就好了嗎？數據綁定的好處就是這裏吧，監控數據的變化重新渲染。
# 添加template
<div class="goHome" @click="showAll"> Home </div>
# 添加method
showAll: function() {
this.newDemos = '';
}- 預覽demo
預覽demo即在列表頁面添加iframe標籤引入demo靜態頁面。默認是不顯示的，如果添加了一個判斷語句v-if
# template add iframe
<iframe src="{{ demo.url }}" scrolling="no" v-if="isShow"></iframe>
# script
# data中添加isShow
data: function() {
return {
// 新增
isShow: false
}
}
# method中添加showAll
method: {
// 新增
showAll: function() {
this.isShow = true;
}
}
- iframe https
github page是https協議，iframe的資源可能是http，也可能是https。對於不確定的情況下，我們不表明具體的協議，使用//。（不擴展討論其它問題）- URI 是https協議，iframe src是http協議
Mixed Content: The page at 'https://domain.dev' was loaded over HTTPS, but requested an insecure stylesheet 'http://domain.dev'. This request has been blocked; the content must be served over HTTPS.
- URI 是http協議，iframe src是https協議
均正常加載訪問，iframe請求地址是https協議。 - URI 是https協議，iframe src是https協議
- URI 是http協議，iframe src是http協議
- URI 是https協議，iframe src是http協議
- 開源協議與開源精神
截止昨晚22點左右，幾位國外的開發者在 漠大 的repo下開了issue，討論關於項目是否不應該存在，或者說是不是不應該拷貝其它平臺（codepen，Codrops …）上的內容在github備份一份。觀點一 原創
國外：重視原創。對於原創的作品的保護或者尊重，我們是不是不應該在其它位置備份別人的作品，而沒有署名源作者的版權信息（其實這一步是準備做，或者說是還沒來得及做，但是考慮到的）。只是沒想到國外的開發者對於原創的重視，還有在Twitter上發推討論，雖然也就那麼幾個人在討論，但其中不乏也有Codrops的開發者。
國內：太多的技術類型的網站，除了作者自己主動分發。更多的還是爬蟲抓取，最後抹去源作者的信息，也不註明來源出處。最後不得不說讓源作者的原創不能得到很好的保護，還造成了很多垃圾水文的存在。觀點二 加源保持最新
很多作者會一直更新自己的項目，但是我們通常只是拷貝了一份最初的版本，如果有升級更新，通常我們都不能使用到最新的內容。還會覺得怎麼參考的文章有錯誤，其實不然，是被抓取出來的沒有及時更新。觀點三 網絡問題
國外開發者也知道中國的問題，其實這是讓我覺得有些可悲的，網絡始終是病。當問及codepen是否能訪問的時候，我說的不能，因爲這個網絡不穩定，常常是不能直接訪問的，所以我們常常收藏一些好的例子，以備不時之需，但最後卻始終是覺得國外的做的好。國內的好作品怎麼蒐集起來，怎麼讓他能夠在trending上持續排第一，得到不止國內開發者的肯定。
雖然我也只是一個渣渣，但是我也有夢想，希望可以更多的提升自己，參與開源，對於原創的保護以及鼓勵希望更多的人能夠重視並自律參與，對於源進行物質的鼓勵或者說行爲上允許後再進行轉載。這路應該還很長…