話說為了迎合設計跟銷售端,我在網頁顯示那邊做了display: table跟列印樣式時覆蓋成文繞圖(float: left)。
文繞圖是一種很基本的排版樣式,至今我無法理解為何可以繞XD,但總而言之他的寫法就是不動文字的部分,然後將要被環繞的區域加上float就好。
若文繞圖失敗目前可歸類兩個原因,1. 本文內容消除溢出。2. 本文內容清除浮動。(浮動要在最外面container才能清,如下方展示。)
話說為了迎合設計跟銷售端,我在網頁顯示那邊做了display: table跟列印樣式時覆蓋成文繞圖(float: left)。
文繞圖是一種很基本的排版樣式,至今我無法理解為何可以繞XD,但總而言之他的寫法就是不動文字的部分,然後將要被環繞的區域加上float就好。
若文繞圖失敗目前可歸類兩個原因,1. 本文內容消除溢出。2. 本文內容清除浮動。(浮動要在最外面container才能清,如下方展示。)
剛剛要整理NodeJS學習筆記的時候,為了不要亂貼CODE而不知其原因,因此上網翻「sourcemap」的功能。印象中,我最近提交專案上線後Chrome的Developer一直告訴我的map遺失。我是有想到我把css跟map放在不同folder(開發folder及發行folder),但由於我的網頁沒掛掉,因此我就先擱置在一邊。
今天剛好看到Getting started with CSS sourcemaps and in-browser Sass editing,覺得原來有這種功能很厲害!
原文那篇使用的是ROR,說要SASS 3.3以上才支援,但基本上我用NodeJS沒特別試過SASS的版本號啦@@
各種NodeJS方法中都會有Sourcemap的方法,筆者用gulp。所以在gulpfile.js這樣下:
// gulpfile.js
'use strict';
var gulp = require('gulp');
var sass = require('gulp-sass');
var sourcemaps = require('gulp-sourcemaps');
// autoprefixer
var autoprefixer = require('gulp-autoprefixer');
// sass
gulp.task('sass', function () {
gulp.src('./scss/**/*.{scss,sass}')
// Initializes sourcemaps
.pipe(sourcemaps.init())
// 轉譯SASS -> CSS
.pipe(sass({
//Log error
errLogToConsole: true,
}).on('error', sass.logError))
// add Prefix in CSS。
.pipe(autoprefixer({
browsers: ['last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4']
}))
// 寫入sourcemaps到當前資料夾(以下下列dest('../css')為基準點,sourceRoot:以匯出的資料夾為基準點找他原本的scss資料夾位置。
.pipe(sourcemaps.write('./', {includeContent: false, sourceRoot: '../src/scss'}))
// 輸出CSS
.pipe(gulp.dest('../css'));
});
// 有改變時即時 Watch
gulp.task('watch', function() {
// 任何scss folder下附檔名為scss、sass的檔案
var watcher = gulp.watch([
'./scss/**/*.{scss,sass}'
], ['sass']);
});
// 預設一開始會跑的任務
gulp.task('default', ['sass', 'watch']);
接著能在css folder內看到指定的*.css、*.css.map
然後接下來,在測試機的demo站使用Chrome開啟網頁按下F12(開發者工具)
如果路徑都沒錯的話,就能看到對應的scss位置:
最有趣的來了!!!如果想要用開發者工具改scss也沒問題,到[Source]中左邊目錄可以看到對應的SASS資料夾,要確定路徑是對的。
任意位置按右鍵[Add folder to workspace],搜尋專案資料夾。
[允許]後,若剛剛的專案資料夾消失,重新整理一下網頁,理論上專案資料夾就會出現。
然後對著任一SCSS檔右鍵點選[Map to file system resource...]
開發者工具即會列出剛剛資料夾內所有符合的檔案(及位置),選擇正確的路徑檔案,就會發現top內localhost下的資料夾消失了。
回去[Elements]隨便找一個可點選的scss link,可以發現他的確對到本機端的scss位置,不論是在[Elements]直接編輯或LINK到[Source]編輯,可以發現Ctrl+S是真的直接幫你存檔的!!!
但要注意的是[Elements]直接編輯的是*.css,到[Source]編輯才是改*.scss噢~
如果要編譯的話,一樣是得開CMD使用gulp、grunt、compass之類的compiler watch changed的~若Chrome沒有當掉,他偵測到更新後也會更新網頁。
最後,若是想跟我一樣同時產min跟非min(原始)的CSS的可以用下面的gulpfile。之所以用cssnano是由於之前試其他的CSS minify都失敗,餵關鍵字給辜狗後發現只有看到有人說cssnano支援sourcemap,但當code變大的時候,nano壓縮的速度真的有點慢QQ
// gulpfile.js
'use strict';
var gulp = require('gulp');
var sass = require('gulp-sass');
var sourcemaps = require('gulp-sourcemaps');
// Post CSS unit (目前壓縮使用cssnano才有辦法用sourcemap @__@)
var postcss = require('gulp-postcss');
var cssnano = require('cssnano');
// autoprefixer
var autoprefixer = require('gulp-autoprefixer');
var cssPath = ['../css/**/*.css', '!../css/**/*.min.css'];
// sass
gulp.task('sass', function () {
gulp.src('./scss/**/*.{scss,sass}')
// Initializes sourcemaps
.pipe(sourcemaps.init())
// 轉譯SASS -> CSS
.pipe(sass({
//Log error
errLogToConsole: true,
}).on('error', sass.logError))
// add Prefix in CSS。
.pipe(autoprefixer({
browsers: ['last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4']
}))
// 寫入sourcemaps到當前資料夾(以下下列dest('../css')為基準點,sourceRoot:以匯出的資料夾為基準點找他原本的scss資料夾位置。
.pipe(sourcemaps.write('./', {includeContent: false, sourceRoot: '../src/scss'}))
// 輸出CSS
.pipe(gulp.dest('../css'));
});
// css mini
gulp.task('mini', function () {
gulp.src(cssPath)
.pipe(sourcemaps.init())
// 再最小化,cssnano會幫你重新由小到大排序z-index,若不要要加入{ zindex: false }
.pipe(postcss([cssnano({ zindex: false })]))
// 將最小化的檔名末端加上.min
.pipe(rename({suffix: '.min'}))
// Writes sourcemaps into the CSS file
.pipe(sourcemaps.write('.', {includeContent: false, sourceRoot: ''}))
// 把最小化的寫入css folder
.pipe(gulp.dest('../css'));
});
// 有改變時即時 Watch
gulp.task('watch', function() {
// 任何scss folder下附檔名為scss、sass的檔案
var watcher = gulp.watch([
'./scss/**/*.{scss,sass}'
], ['sass']);
var watcher2 = gulp.watch(cssPath, ['mini']);
// 看有沒有修正到對的scss檔
watcher.on('change', function(event) {
console.log('SASS Task: File ' + event.path + ' was ' + event.type + ', running tasks...');
});
watcher2.on('change', function(event) {
console.log('Mini Task: CSS File ' + event.path + ' was ' + event.type + ', running tasks...');
});
});
// 預設一開始會跑的任務
gulp.task('default', ['sass', 'watch']);
筆者最近碰到Node.js用官方的MSI檔案裝到快完後rollback的事件……歸咎原因我一開始就猜想是否沒清乾淨。
然後丟關鍵字餵Google,上頭方法都無腦測試過了,但還是不能用= =
在經過幾天空閒時間丟各種關鍵字餵Google,這邊提供幾種solution。
至於有這幾種解的原因是:我一直想克服MSI的問題,但超過半數都叫大家用官方EXE後下載安裝npm,先是有時間壓力,因此多了幾種方法裝NodeJS。
如果專案告急沒時間做各種嘗試,這絕對是最快的辦法。
node -v
npm -v
npm install gulp -g & :: 隨意安裝需要安裝至global的package測試,這邊用gulp
gulp -v
如圖:
我一開始是用這個方案ㄉ,但是我安裝失敗惹,所以才衍生了第一種方法。
但我現在檢討安裝失敗的原因八成是在安裝npm的時候層次不對。
參考這篇安裝:Install Node.js and NPM on Windows及How to use npm with node.exe(以及下面另一個回答有搬移的目錄)
下載官方exe檔到任意資料夾(這裡設定C:\node)。
到npm的github打包專案到node資料夾,或者用git clone,如下:
C:\node\node_modules > git clone --recursive git://github.com/npm/npm.git
安裝的層次會如下:
先確認[環境變數]的[path]已將NodeJS的exe加入路徑,然後在cmd測試是否安裝成功:
c:\newproject > npm -v
c:\newproject > npm install gulp-sass
但是我發現這個方式安裝的package會裝入一堆沒用到的東西ˊ_>ˋ,而且不能下指令更新npm……
所以與其這樣我寧可推薦「重新安裝至新的電腦再複製到開發機」。
某次NodeJS改版把裡面的專案的modules都拉到最外層了……因此上次測試時才看到他裝了一堆東西(遠)至於下指令更新npm還有待實驗。
NodeJS官方提供了兩種第三方安裝NodeJS的方式,為了寫這篇我老實的測試了他做了什麼……
我測試的是Scoop,Scoop的安裝方法蠻簡單的。先確認PowerShell有被安裝在電腦中,然後在CMD下指令安裝Scoop(ㄟ,Scoop官方首頁的YouTube影片照做就好)。
安裝完Scoop後執行下列cmd string,Scoop會幫你把官方MSI下載下來且安裝到:C:\Users\{{使用者}}\AppData\Local\scoop\apps\nodejs\{{版本號}}\nodejs
C:\隨便 > scoop install nodejs
最後把NodeJS的路徑放到[環境變數]下新增[path],關掉CMD重開一個,測試一下npm版本號,就確認安裝成功了0.0/
順帶一提,我發現放在Scoop指定的目錄下時,對全域的npm指令會放在相同Scoop的node_modules位置,所以[環境變數]就不用加C:\Users\{{使用者帳戶名稱}}\AppData\Roaming\npm
本人就是不信邪,覺得機碼沒刪乾淨,所以四處找刪除的方法。
但碰到的人似乎沒有很多,所以一直沒找到……(有找到一條指令能刪光機碼,不敢用XD)
真正解決問題是我老實的看了安裝LOG檔……再對應LOG輸出的錯誤回頭Google找到機碼的位置,把機碼砍了才OK的= =
所以這題的重點是如何看MSI的LOG……
按照如何啟用 Windows Installer 記錄的作法蠻簡單的,安裝完後到它指定的目錄找txt就好。
先開啟LOG紀錄,再做一次安裝NodeJS,回頭找LOG的txt裡面錯什麼。最難的就是找錯什麼XD,因為LOG有快20M……訣竅是開啟本文搜尋「value 3」,或者「錯誤」也可以試試看。
除了MSDN用裝的方式(記得要解安裝,不然每次用MSI裝都會產生20M左右的LOG),也可以在CMD下指令記錄單次LOG
msiexec /i "C:\LocalDir\node-v4.4.3-x64.msi" /L*V "C:\LocalDir\InstallLog.txt"
本篇的錯誤是:無法在 C:\Program Files\nodejs\node_perfctr_provider.man 安裝效能計數器,錯誤碼是 13。明顯的就是這個「效能計數器」的問題,大概GOOGLE一下找到這篇[MS-SQL]安裝時發生錯誤『檢查現有的效能計數器登錄區是否一致』。
雖然按照他的方法開啟Regedit([開始]>[Regedit])檢查了但沒有結果XD,不過他提供了我可能的路徑:
[HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows NT\CurrentVersion\Perflib\...]
地毯式搜尋了一下,還真的在[_V2Providers]找到未清掉的機碼XD,直接對這個folder({1e2e157d-....})右鍵刪除,重裝NodeJs.msi就成功了!!!
經此一事,很明顯的我學到要針對錯誤對症下藥……所以LOG要看,亂測是沒有用的。
筆者剛開始用Node.js的時候看教學文件不太明瞭為何第一步驟是產生package.json,覺得copyright這種東西隨便ra…所以之前寫SCSS的時候都不init。
每次要建置新的專案的時候,都要按順序慢慢install,像這樣:
$ npm install gulp
$ npm install gulp-sass
$ npm install gulp-sourcemaps
…
執行第一次後,想說之後就複製貼上node_module…但試過後發現他會因為檔案數量太多有問題= =。
所以只能每次複製貼上嗎!?真心覺得蠢,難道我每做一個專案都要重新執行上述步驟= =!?
一開始想:不能放global區,大家都去global找檔案嗎?然後發現,Node.js的確不是這麼設計的,不然我只能去下link指令連到global…但總覺得好像哪裡有問題。
所以我過了兩三個月一個一個install的日子……直到我看到npm 基本指令。提到「只要將 package.json 這個檔案放在專案的根目錄裡, 就不需要一個個的手動安裝套件.」
於是我明白ㄌinit的重要性ˊ_>ˋ
先產製package.json的檔案:
$ npm init
然後中間看需求輸入,重點是讓他生出package.json的文件。
產出文件後,由於筆者只用Node.js的SCSS跟CSS Minifiy、JS Minifiy之類開發時才需要的package,一個一個輸入歸類到開發:
$ npm install gulp --save-dev
$ npm install gulp-sass --save-dev
$ npm install gulp-sourcemaps --save-dev
…
如果要建製新的專案,用的東西也差不多的時候,直接把package.json複製到新的專案資料夾,輸入:
$ npm install -l
就能把基本的東西裝完了!!!
bower也差不多,要重新建置一個bower.json
$ bower init
建置bower.json完成後再安裝需要的內容:
$ bower install normalize-scss --save-dev
新的專案把bower.json複製到新的專案資料夾,下一行指令,預設的bower就安裝完成了 !
$ bower install
參考資源:
其實是為了筆記XD,看了數種plugin後最喜歡prism的theme~
一般來說,程式若要寫在blog上,用html標記的話是放在pre>code內
<pre><code>這裡</code></pre>
但如果未上色的話看起來會較不容易閱讀。如下:
setTimeout(function(){
$('#areaMenu').parents('nav.nav').removeClass('active');
}, 1500);
$('#areaMenu').on('click', function(e){
e.preventDefault();
if($(this).parents('nav.nav').hasClass('active')) {
$(this).parents('nav.nav').removeClass('active');
} else {
$(this).parents('nav.nav').addClass('active');
}
});
如果highlight code就會覺得友善多了,而且很多人都有寫,所以找網路資源就好!
setTimeout(function(){
$('#areaMenu').parents('nav.nav').removeClass('active');
}, 1500);
$('#areaMenu').on('click', function(e){
e.preventDefault();
if($(this).parents('nav.nav').hasClass('active')) {
$(this).parents('nav.nav').removeClass('active');
} else {
$(this).parents('nav.nav').addClass('active');
}
});
本次使用prism.js示範。
先到後台,選版面配置
到footer的位置新增HTML/JavaScript
將prism在cdn的位置填入
<!-- 主要的樣式 -->
<link href="//cdnjs.cloudflare.com/ajax/libs/prism/1.4.1/themes/prism.min.css" rel="stylesheet" type="text/css" />
<!-- 顯示行數的樣式 -->
<link href="//cdnjs.cloudflare.com/ajax/libs/prism/1.4.1/plugins/line-numbers/prism-line-numbers.min.css" rel="stylesheet" type="text/css" />
<!-- 上色js -->
<script src="//cdnjs.cloudflare.com/ajax/libs/prism/1.4.1/prism.min.js"></script>
<!-- 顯示行數的js -->
<script src="//cdnjs.cloudflare.com/ajax/libs/prism/1.4.1/plugins/line-numbers/prism-line-numbers.min.js"></script>
然後基本上就會高亮程式碼了!
<pre class="language-html"><code><!-- 這裡 --></code></pre>
如果發現mobile版的時候HTML/JavaScript沒有被插入,請在部落格右鍵,看網頁原始碼找被插入的檔案。在本篇,blogger給他的id="HTML1"
到範本中,選擇「編輯HTML」。
可以依照他的工具跳到HTML1或者我比較喜歡用ctrl+F快速跳轉。
在該widget下增加「mobile='yes'」的屬性
<b:widget id='HTML1' locked='false' mobile='yes' title='code style plugin' type='HTML'>...
手機板就會顯示此樣式囉!
參考資源:
/* 修正粗體 */
@font-face {
font-family: '微軟正黑體修正';
unicode-range: U+7db0, U+78A7, U+7B75; /* ASCII (碧筵綰) */
font-style: normal;
font-weight: bold;
src: local(Yu Gothic), local(MS Gothic);
}
/* 一般粗細的時候改回微軟正黑 */
@font-face {
font-family: '微軟正黑體修正';
unicode-range: U+7db0, U+78A7, U+7B75; /* ASCII (碧筵綰) */
font-style: normal;
font-weight: normal;
src: local(微軟正黑體);
}
* {
font-family: Helvetica, Arial, 微軟正黑體修正, 微軟正黑體, serif;
}