使用NodeJS做一個簡單的Send Mail Service

前端有時候就要做一些很阿雜的事，像是測試EDM之類的。最近碰到的CASE就是我使用的免費Web Test Mail被公司的Mail Server檔掉，然後設備工程師那邊沒時間理我……我就想應該有人寫了Send Mail的plugin了吧，基於我覺得蠻好用的，這邊筆記一下。

1. packages
2. build
3. 使用Google App Passwards
4. Source Code(GitHub)

packages

NodeJS的安裝這邊就不特別寫了，如果想參考windows的各種安裝方案可以參考Node.js學習筆記：重複安裝後rollback安裝失敗這篇。

先到專案資料夾shift + 右鍵，可以選擇「在此處開啟命令視窗」。產生一個package.json

於命令視窗輸入npm init

  npm init

這篇sample引用兩個package，一個是nodemailer(寄信)，另一個是fs(讀檔)。

  npm install nodemailer fs --save

開一隻testEmail.js，接著引用nodemailer及fs。

  var nodemailer = require('nodemailer');
  var fs = require('fs');
var smptCfg = require('./package').config.smtp;

我的習慣會把connecting string寫在config之類的地方，所以我就拉到package.json裡面，開一個config，加上上面init出來的package大略長這樣。

  {
    "name": "sendmails",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "dependencies": {
      "fs": "0.0.1-security",
      "nodemailer": "^4.1.0"
    },
    "devDependencies": {},
    "scripts": {
      "test": "echo \"Error: no test specified\" && exit 1"
    },
    "author": "",
    "license": "ISC",
    "config" : {
      "smtp" : {
        "host": "smtp.gmail.com",
        "port": 465,
        "secure": true,
        "auth": {
          "user": "Your Google account...",
          "pass": "Google pwd..."
        }
      }
  }
}

smtp的服務可以看自己方便選用，我套過公司的信箱跟gmail，這邊以方便取得的gmail為範本。Gmail的SMTP設定可以參考官方說明。

這邊簡單寫一下官方寫的設定標準：

• host: smtp.gmail.com
• Requires SSL: Yes
• Requires TLS: Yes (if available)
• Requires Authentication: Yes
• Port for SSL: 465
• Port for TLS/STARTTLS: 587

build

testEmail.js的範本可以參考Nodemailer官方文件，我這邊是稍微調整了比較容易異動的變數到文件上方，並且改為讀檔的方式來讀取本文內容(html)。

  var nodemailer = require('nodemailer');
  var fs = require('fs');
  
  // package.json 設定的一些config資料
  var smptCfg = require('./package').config.smtp;
  var mailBodyPath = './system_email.html',
      mailOptions = {
        from: '"no-reply 測試信" <your@gmail.com>',
        to: '',
        bcc: 'testto@gmail.com',
        subject: '[測試信] 某個主題'
        // text: 'That was easy!',
        // html: mailBody // 下方讀檔後覆蓋
      };
  // 設定於package.json
  var transporter = nodemailer.createTransport({
    host: smptCfg.host,
    port: smptCfg.port,
    secure: smptCfg.secure, // true for 465, false for other ports
    auth: {
      user: smptCfg.auth.user,
      pass: smptCfg.auth.pass
    }
  });
  // 讀檔
  fs.readFile(mailBodyPath, 'utf8', function (err, mailBody) {
    if (err) {
      return console.log(err);
    }
    // 代入mail本文
    mailOptions.html = mailBody;
    
    // 寄信
    transporter.sendMail(mailOptions, function(error, info){
      if (error) {
        console.log(error);
      } else {
        console.log('Email sent: ' + info.response);
      }
    });
});

接著在cmd build testEmail：

  node testEmail

成功的話就會看到Email sent: + info.response。

筆者在家裡的電腦產生了TLSSocket的Error Msg。

  C:\project\nodeSendMail>node testEmail
  { Error: self signed certificate in certificate chain
      at Error (native)
      at TLSSocket.<anonymous> (_tls_wrap.js:1092:38)
      at emitNone (events.js:86:13)
      at TLSSocket.emit (events.js:185:7)
      at TLSSocket._finishInit (_tls_wrap.js:610:8)
      at TLSWrap.ssl.onhandshakedone (_tls_wrap.js:440:38) code: 'ECONNECTION', co
mmand: 'CONN' }

這邊採用修改參數的做法讓信件送出去。在CMD下：

  set NODE_TLS_REJECT_UNAUTHORIZED=0

然後我的防毒軟體很雞婆的幫我塞病毒檢測沒有問題XD...

使用Google App Passwards

如果按照上面範例把帳號密碼打進去，其實就可以build了，但build的時候就會發現google跟你說，這樣很不安全，請使用應用程式密碼之類的，然後就會建置失敗XD。
這時候有兩個選擇，一個是啟用安全性較低的應用程式存取權，另一個是設定應用程式密碼。

第一個方式比較快，google帳戶說明也寫了路徑。缺點是google告訴你容易被盜用XD。

稍微設定一下就會發現，如果把帳號密碼打在package.json當然很危險阿XD...畢竟是明碼顯示，如果哪天交接忘記改也很麻煩。

因此這邊建議申請App Passwords。

步驟也蠻簡單的，先到Google Account啟用兩步驟驗證

然後就可以到應用程式密碼(上圖兩步驗證的下面)設定一組專門for特定應用程式的密碼，到時候如果要取消授權，可以直接從帳號這裡移除該組密碼。

一組不會再顯示的密碼，記得先複製下來：

純色小圖示的解決方案

如果有從設計手上拿過各種網頁小icon的話，應該都蠻困擾要怎麼處理這些小東西的吧？

雖然有用gulp或compass的人可能會選擇用sprite來把多個小icon組成一個images map，但還是有一些缺點的。像是如果icon要放大，可能就要存多個icon，畢竟不論放大縮小，png的邊緣都有可能模糊。

有玩過fontawesome的應該都知道純色圖片可以做成字型檔，由於字型檔本身是向量的結構，因此純色圖片可以壓成一張大的字型檔。

優點有這些：

1. 縮放無鋸齒、模糊
2. 改變顏色可以直接下color的CSS，不用做成另一張圖
3. 改變大小用font-size做變化就好
4. 基本上可以相容到ie8
5. 文字可以用text-shadow這個CSS功能產生陰影

但也是有缺點的，就是只能做純色圖。因此icon有兩種以上的顏色可能要繼續沿用sprite了。

之前同事有跟我提這件事，她本來想有時間自己嘗試壓文字，但她離職就不了了之QQ

後來筆者找個時間研究，發現根本有線上支援的網站，不用花時間自己壓成多種格式(真要自己壓可以參考下面那篇網頁使用微軟正黑體的修復方案最後提到的製作補丁)。

目前我在使用的是fontastic，這套原本就包含好幾個免費icons，因此除非沒有適合的，不然也沒必要特別製作啦……

選用icons這邊就不示範，這裡提供上傳的方法。

1. 註冊登入

   

2. 新增icon

   

3. 匯入icon

   

4. 將設計給的SVG整理乾淨後把檔案匯入

   

5. 就可以在首頁看到客製的icon了！

   

   1. 會先看到匯入的為一個New Set
   2. 如果未來想要繼續在這個Set增加請使用Add icons to this set.
   3. 點選要publish的icon後(該icon會被黃框圈起)後到publish下載icons集

6. 下載

   

文繞圖的失敗原因

話說為了迎合設計跟銷售端，我在網頁顯示那邊做了display: table跟列印樣式時覆蓋成文繞圖(float: left)。

文繞圖是一種很基本的排版樣式，至今我無法理解為何可以繞XD，但總而言之他的寫法就是不動文字的部分，然後將要被環繞的區域加上float就好。

若文繞圖失敗目前可歸類兩個原因，1. 本文內容消除溢出。2. 本文內容清除浮動。（浮動要在最外面container才能清，如下方展示。）

See the Pen 基本文繞圖 by Inu (@Inu) on CodePen.

SASS學習筆記：Sourcemap

剛剛要整理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學習筆記：重複安裝後rollback安裝失敗

筆者最近碰到Node.js用官方的MSI檔案裝到快完後rollback的事件……歸咎原因我一開始就猜想是否沒清乾淨。

然後丟關鍵字餵Google，上頭方法都無腦測試過了，但還是不能用= =

在經過幾天空閒時間丟各種關鍵字餵Google，這邊提供幾種solution。

1. 重新安裝至新的電腦再複製到開發機
2. 使用官方exe再下載安裝npm
3. 官方提供兩種第三方安裝方式
4. 我就是要用MSI安裝！！！

至於有這幾種解的原因是：我一直想克服MSI的問題，但超過半數都叫大家用官方EXE後下載安裝npm，先是有時間壓力，因此多了幾種方法裝NodeJS。

重新安裝至新的電腦再複製到開發機

如果專案告急沒時間做各種嘗試，這絕對是最快的辦法。

1. 先找一台沒裝過NodeJS的Windows OS。
2. 下載官方MSI檔後逐步安裝。
3. 到安裝的資料夾(通常是C:\Program Files\nodejs)把整個nodejs加到壓縮檔。
4. 複製壓縮檔到開發機，解壓縮到任意位置(這裡解壓至C:\nodejs)
5. 在Win環境[開始]>[控制台]>[編輯您的帳戶的環境變數]或者用下圖方式搜尋：
6. 在[環境變數]下新增[path]，值為「C:\nodejs;C:\Users\{使用者帳戶名稱}\AppData\Roaming\npm」如下圖：

   

   第一個位置是NodeJs主程式的位置，第二個為global(-g)的安裝位置。
7. 然後開cmd測測看：

   
       node -v
       npm -v
       npm install gulp -g & :: 隨意安裝需要安裝至global的package測試，這邊用gulp
       gulp -v        
           

   如圖：

   

使用官方exe再下載安裝npm

我一開始是用這個方案ㄉ，但是我安裝失敗惹，所以才衍生了第一種方法。

但我現在檢討安裝失敗的原因八成是在安裝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

安裝的層次會如下：

• node(資料夾)
  • node_modules(資料夾，自行新增)
    • npm(資料夾，剛剛下載的，把版本號拿掉)
  • npm(從npm/bin裡面複製出來。)
  • npm.cmd(從npm/bin裡面複製出來。)
  • node.exe

先確認[環境變數]的[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

我就是要用MSI安裝！！！

本人就是不信邪，覺得機碼沒刪乾淨，所以四處找刪除的方法。

但碰到的人似乎沒有很多，所以一直沒找到……(有找到一條指令能刪光機碼，不敢用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學習筆記：init的應用

筆者剛開始用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

---

參考資源：

• NodeJS require a global module/package
• npm 基本指令

在Blogger為程式碼上色

其實是為了筆記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'>...

手機板就會顯示此樣式囉！

---

參考資源：

• 版面配置的網頁元素標記
• 如何在網頁blogger中插入程式碼