【項目記錄】我的主頁設計和實現

時間 2019-12-08

標籤項目記錄我的主頁設計實現简体版

原文原文鏈接

思路

但願有一個站點能夠歸併技術文章、產品探索、生活記錄和項目代碼。git

技術文章
Hexo活躍齊全的生態的確很誘人，但經過Github管理文章、圖片資源其實並非很優雅。再者，存在流通和傳播上的問題。現有的專欄平臺支持標籤和交流功能，也可手動設計標題代替類別目錄，夠夠的，因而選擇了segmentfault。 github

產品探索
研究一些好用的應用，我的對產品的思考，記在知乎專欄。gulp

生活記錄
日誌、畫、書音影，豆瓣再合適不過。segmentfault

項目代碼
天然是GitHub。curl

我的站點即一個集中入口，簡單明瞭的首頁+我的介紹頁，完畢。異步

開發流程

在iPad上畫了個草圖，四個明晃晃的入口，要有Logo。async

各類分辨率的屏上表現不差勁，用SVG。svg

資源請求儘可能簡單，SVG樣式可控，svg-sprite，那得上gulp了。函數

gulp處理完的symbol要插入頁面，加上入口項複用，用模板吧，熟悉的是handlebars。佈局

既然上了gulp，乾脆SCSS，livereload，dev-server都搞一搞。

爲何一個簡單的頁面要搞那麼複雜，練手而已。

開發記錄

gulp4 的更新

gulp默認裝了4.0.0的版本，好久沒關注。

增長`gulp.series`和`gulp.parallel`

gulp默認最大化並行執行任務，以往須要順序執行任務時，須要藉助輔助插件run-sequence之類。上述兩個方法提供串行和並行選擇，同時gulp4中再也不支持[task]寫法，必須使用上述兩個方法代替。

gulp.series('clean', 'build'); // 先執行clean task，再執行build task
gulp.series('clean', function () {
    // do some things
});

gulp.parallel('watch', 'connect') // 同時執行watch和connect
gulp.series('clean', gulp.parallel('styles', 'scripts')) // 先執行clean，而後styles + scripts

gulp.watch('src/**/*.js', ['scripts']) // error: watch task has to be a function (optionally generated by using gulp.parallel or gulp.series)

異步任務須要結束信號

當任務中可能有異步代碼（好比watch，好比dev-server），須要顯示發出異步完成信號

在Gulp 3.x中，你能夠在不這樣作的狀況下離開。若是您沒有顯式地發出異步完成信號，則只會假設您的任務是同步的，而且在任務函數返回後當即完成。 Gulp 4.x在這方面更加嚴格。您必須明確表示任務完成。

支持的寫法挺潮的

卡片佈局

思路

svg須要設定寬度和高度，若是跟隨卡片變化，卡片不能使用padding-bottom實現寬高比（沒有高度），因此卡片必須指定寬高。可使用媒體查詢調整卡片尺寸，目前使用固定寬度實現（未測試大屏下狀況）。
實現四張卡片對齊排布，四列兩列到一列分佈。flexbox搭配flex-wrap屬性能夠實現自動換行，結合媒體查詢控制容器寬度實現列數控制。