FreeTong DIY: 9月 2014

2014年9月30日

黃絲帶

2014年9月28日

Blogspot 列表模式-文章標題;自定大小的首幅圖片;部分內文;閱讀更多

相片為主的 Blogger, 多是以飲食; 旅遊; 攝影... 等等. 大圖片正是他們的要求.
可是相片一多, 在 Blopspot 的首頁; 或是查詢結果時, 總是長長滿滿的一整頁.
好不容易, 才找到某個內容而切入主題網頁文章.

我之前也出過幾篇, 關於 "讓 Blogger 只顯示文章標題; 部分內文 &小圖片" 的文章,
它們有著不同的定位點. 但是, 都有一個相同的問題: ｢圖片太小了｣

可以顯示大圖片的方法是有的, 但是需要修改的地方過多, 不好理解.
找到了一個比較簡單, 跟以往一樣, 以標準的 Blogspot 的 Template(範本), 只是更換了 HTML 裡頭的一句...
<b:include data='post' name='post'/> 得出的效果算是不錯.

跟以往相比, 這一次的要求是...
~ 單一文章時, 全篇顯示. 其他的情況以"列表模式"顯示
~ 只顯示文章首幅圖片, 而且可以設定顯示大小.
~ 部分內文; 閱讀更多同樣保留了
~ 新增了留言; 標籤兩項資訊

圖片可以設定顯示大小,
主要是利用 Javascript 找出 thumbnailUrl 內容, 以 replace 的方式改變了圖片大小設定值.
簡單的講解一下, 原本"小圖"是以 s72-c 這個數值為顯示預設.
s72 = 72px ; -c = 正方型(長型圖片以切頭切尾方式, 只剪裁中間的部份)
所以只要把這個更換, e.g. s400 便可以得到 400px 的比例圖片.

因應大圖片顯示方式, 可以選擇兩個不同的排版文效果.

置中排版; 比例圖片
只需要修改第 15 行"s400"這組數值, 便可以更新圖片大小設定值. e.g."s600"

<!-- <b:include data='post' name='post'/> 原有語句 -->
<!-- 不是單頁時,顯示文章標題;自定大小的首幅圖片(中間);部分內文;閱讀更多 start-->

<b:if cond='data:blog.pageType == "item"'>
<b:include data='post' name='post'/>
<b:else/>
<div>
<h3 class='post-title'><a expr:href='data:post.url'><data:post.title/></a></h3>
<div>
<a expr:href='data:post.url' imageanchor='1'>
<!-- 自設縮圖大小  -->
<script type='text/javascript'>
(function() {
     var pic = "<data:post.thumbnailUrl/>";
     pic = pic.replace("s72-c","s400"); // 設定圖片大小; s400 即是長邊是400px的比例圖片
      document.write("<img src='"+ pic +"' style='display:block; margin:auto;margin-top:10px;'/>");
    })()
 </script>
 </a>
 </div>
<div style='margin-top:10px;'><data:post.snippet/></div>
<!-- 閱讀更多 -->
<div class='jump-link' style='text-align:right; margin-top:10px;'>
<a expr:href='data:post.url' expr:title='data:post.title'><data:post.jumpText/></a>
 </div>
<!-- 留言數量 -->
<span class='post-comment-link'>
<b:if cond='data:post.allowComments'>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>
<b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/>
<b:else/><data:post.numComments/><data:top.commentLabelPlural/>
</b:if></a></b:if>
 </span>
<!-- 標籤 -->
<span class='post-labels'>
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast !=   "true"'>,</b:if></b:loop></b:if>
 </span>
 </div>
 </b:if>

<!-- 不是單頁時,顯示文章標題;自定大小的首幅圖片(中間);部分內文;閱讀更多 end-->

左右排版; 正方型圖片
只需要修改第 15 行"s200-c"這組數值, 便可以更新圖片大小設定值. e.g."s300-c"

<!-- <b:include data='post' name='post'/> 原有語句 -->
<!-- 不是單頁時,顯示文章標題;自定大小的首幅圖片(左側);部分內文;閱讀更多 start-->
 
<b:if cond='data:blog.pageType == "item"'>
<b:include data='post' name='post'/>
<b:else/>
<div>
<h3 class='post-title'><a expr:href='data:post.url'><data:post.title/></a></h3>
<div>
<a expr:href='data:post.url' imageanchor='1' style='clear:left; float:left; margin-right:10px;'>
<!-- 自設縮圖大小  -->
<script type='text/javascript'>
(function() {
     var pic = "<data:post.thumbnailUrl/>";
     pic = pic.replace("s72-c","s200-c"); // 設定圖片大小; s200-c 即是200px正方型
      document.write("<img src='"+ pic +"' />");
    })()
</script>
</a>
<div style='margin-top:10px;'><data:post.snippet/></div>
<div style="clear:both"></div>
 </div>
<div style='clear:left; float:left; margin-right:10px; margin-top:10px;'>
<!-- 留言數量 -->
<span class='post-comment-link' >
<b:if cond='data:post.allowComments'>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>
<b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/>
<b:else/><data:post.numComments/><data:top.commentLabelPlural/>
</b:if></a></b:if>
 </span>
<!-- 標籤 -->
<span class='post-labels'>
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if></b:loop></b:if>
 </span>
 </div>
<!-- 閱讀更多 -->
<div class='jump-link' style='text-align:right; margin-top:10px;' >
<a expr:href='data:post.url' expr:title='data:post.title'><data:post.jumpText/></a>
 </div>
 </div>
 </b:if>
 
<!-- 不是單頁時,顯示文章標題;自定大小的首幅圖片(左側);部分內文;閱讀更多 end-->

現時本網誌所使用的結構, 左右排版; 大圖示.

<!-- <b:include data='post' name='post'/> 原有語句 -->
<!-- 不是單頁時,顯示文章標題;自定大小的首幅圖片(左側);部分內文;閱讀更多 start-->
 
<b:if cond='data:blog.pageType == "static_page"'>
<b:include data='post' name='post'/>
<b:else/>
<b:if cond='data:blog.pageType == "item"'>
<b:include data='post' name='post'/>
<b:else/>
<a expr:href='data:post.url' imageanchor='1' style='clear:left; float:left; margin-right:10px;'>
<!-- 自設縮圖大小  -->
<script type='text/javascript'>
(function() {
     var pic = "<data:post.thumbnailUrl/>";
     pic = pic.replace("s72-c","s350");// 設定圖片大小, e.g. S350
     document.write("<img src='"+ pic +"'/>"); 
    })()
</script>
</a>
<div><h3 class='post-title'><a expr:href='data:post.url'><data:post.title/></a></h3><div>
<div style='margin-top:10px;'><data:post.snippet/></div>
<div style='clear:both'/></div>
<div style='clear:left; float:left; margin-right:10px; margin-top:10px;'>
<!-- 留言數量 -->
<span class='post-comment-link'>
<b:if cond='data:post.allowComments'>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>
<b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/>
<b:else/><data:post.numComments/><data:top.commentLabelPlural/>
</b:if></a></b:if>
 </span>
<!-- 標籤 -->
<span class='post-labels'>
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if></b:loop></b:if>
 </span>
 </div>
<!-- 閱讀更多 -->
<div class='jump-link' style='text-align:right; margin-top:10px;'>
<a expr:href='data:post.url' expr:title='data:post.title'><data:post.jumpText/></a>
 </div>
 </div>
 </b:if></b:if>
 
<!-- 不是單頁時,顯示文章標題;自定大小的首幅圖片(左側);部分內文;閱讀更多 end-->

需要修改 [範本](Template), 所以請先行備份, 以準備不時之需.
步驟為 [設計]> [範本]> [編輯HTML]>
在長長程式碼裡頭, 按下鍵盤上的 [Ctrl]+[F] , Search 欄位出現了.
尋找這一句, <b:include data='post' name='post'/> 全篇應該只有一句.
更換成為以上的分析流程...

有關 Toggle Visibility 功能

2014年9月14日

Google Cardboard (老翻版)

Google Cardboard 一件十分有趣的手機配件,
它在 Google I/O 2014 免費送給參與人仕的.

今日收到一份 Google Cardboard (老翻版)
基本是以原版設計, 但用上最差的物料, 左併右合而成.

包裝更是只得"一包"

二話不說, 馬上摺合成形, 一試手機上 3D 感受.

Cardboard 的網頁
https://cardboard.withgoogle.com/

YouTube 上的視頻簡介
https://www.youtube.com/results?search_query=google+cardboard

Cardboard Apps
https://play.google.com/store/apps/details?id=com.google.samples.apps.cardboarddemo

Chrome Experiments for Cardboard 更多網上 3D 效果
http://vr.chromeexperiments.com/

2014年9月11日

Moto X 試一試 (4.4.4 KitKat 更方便的改變)

Moto X 的更新文件寫了...
"Android 4.4.4 KitKat 此版本包含電源設定檔、數個穩定性、框架的準確度改善，以及包含 OpenSSL 更新的安全性修正。"

大部分都是看不見, 只有日後的使用感受, 才會察覺得到.

看見的有...

可以顯示或是隱藏行動網路名稱

相機拍攝時可以開啟或是關閉快門音效

手機撥號器帶有新的 圖形配置及色彩 , 改善一致性與可用性

支援新 Apps "Motorola 提示"
https://play.google.com/store/apps/details?id=com.motorola.bodyguard

還有, 一網友在之前提問過...
"ching你好,我想請問moto x升級4.4.4係唔係冇左otg usb lan功能"

試驗做過了, 答案是可用 LAN 線上網.

2014年9月9日

Moto X 試一試 (更新 4.4.4 KitKat)

今天是"中秋節"翌日的公眾假期.
一早得來一個消息, 等了很久的 Moto X (加版XT1058), 正式啟動了更新.

版本是 212.44.26.en.CA
"同意"後, 選擇你的下載方式.

系統更新文件共有 141.7MB
"立即安裝"大約用上 10 分鐘時間.

自動關機後, 安裝系統更新.
再次 Boot 機, 我的有 207個文件進行最佳化.
(相信是用了 ART 模式的關係)

最終更新完成了. Android 版本 4.4.4

更新的內容, Moto 網上是這樣說明的...
https://motorola-global-chn.custhelp.com/app/answers/detail/a_id/100638

Moto X - Android™ 4.4.4, KitKat®
簡介

我們很高興在此發表 Motorola Moto X 的最新軟體更新。您可透過此升級為 Moto X 取得最新版的 Android 作業系統 (Android™ 4.4.4

KitKat®)，以及新功能、增強功能和錯誤修正。如需 Motorola 更新與維修的更多資訊，請造訪 www.motorola.com/mymotox。

附註：安裝此更新後，您便無法降級到舊版軟體。

增強功能

此 Moto X 軟體更新是供所有使用者使用。安裝軟體更新後，您將會看到數個增強功能和變更，包括：

Android™ 4.4.4 KitKat®
Android 4.4.4 KitKat 是最新版的 Android 平台。此版本包含電源設定檔、數個穩定性、框架的準確度改善，以及包含 OpenSSL 更新的安全性修正。

相機 - 改善圖片品質
改善相機圖片品質，包含更一致的曝光、更真實的閃光色彩、改良在低光源環境使用正面相機拍出來的相片品質。

相機 - 暫停視訊錄製
新增可利用取景器上便利的 [暫停/繼續] 按鈕暫停視訊錄製的功能。

更新手機撥號器
更新的手機撥號器具有全新的圖形配置及色彩，改善一致性與可用性。

可下載「Motorola 警示」應用程式
全新「Motorola 警示」應用程式可將內含您目前位置的提示定期傳送給您所選的聯絡人。現在可從 Google Play 商店下載。

2014年9月6日

文章嵌入程序碼 Codebock & Google Code Prettify 筆記篇

文章中加入程式碼, 很早之前已經有 Codeblock 這個 CSS 的小工具.
再加上 Google Code Prettify 為程式裡的文字上色. 可以講它是最簡單展示方法.

但是, Codeblock 一般都是灰色底, 算是用 Google Code Prettify 為文字上了色.
一旦句子超多, 它會變得不好閱讀.
所以, 我把它設定到, 有順列序號, 文字上色, 隔行背景上色, 更好的指示及了解.

先列出我使用的程式碼...
Codeblock 找不到最初開發的版本, 只好介紹我手上的.
Google Code Prettify 有它的網址, 有更多可選用變化, 可供參考.
https://code.google.com/p/google-code-prettify/

當中我有作出小量修改, 以合乎我的要求.
Codeblcok 裡, 我刪掉了 font-family & font-size 兩個指示, 以及把 background: #ffffff 全白色.
Code Prettify 除了用載入了它的 Script, 還加入了它的 Style CSS 支援程序.

<!-- CodeBlock Start -->
<style>
.post .codeblock {
display: block; /* fixes a strange ie margin bug */
overflow:auto;
background: #ffffff url(data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAASwCAYAAAAt7rCDAAAABHNCSVQICAgIfAhkiAAAAQJJREFUeJzt0kEKhDAMBdA4zFmbM+W0upqFOhXrDILwsimFR5pfMrXW5jhZr7PwRlxVX8//jNHrGhExjXzdu9c5IiIz+7iqVmB7Hwp4OMa2nhhwN/PRGEMBh3Zjt6KfpzPztxW9MSAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzB8HS+J9kUTvzEDMwAAAABJRU5ErkJggg==) left top repeat-y;
border: 1px solid #ccc;
padding: 10px 10px 10px 21px;
max-height:350px;
line-height: 1.2em;
}
</style>
<!-- CodeBlock End -->

<!-- https://code.google.com/p/google-code-prettify/ Start -->
<script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js"></script>
<style>
li.L0, li.L1, li.L2, li.L3,
li.L5, li.L6, li.L7, li.L8
{ list-style-type: decimal !important }
</style>
<!-- https://code.google.com/p/google-code-prettify/ End -->

只要把它全部貼到 Blog 裡頭,
打開 [版面配置]> [新增小工具]> [HTML/JavaScript]
不用寫入標題. 一按[儲存]已經完成.

編寫文章, 需要加上程式碼講解展示時.
只直接在[撰寫]裡貼上程式碼, 再轉到[HTML]模式, 人工加入 <pre>...</pre> 指令便可以.

Code Prettify 有多個參數, 可以得出不同的變化, 列出常用的, 方便日常使用.

單一 Codeblock 模式

<pre class="codeblock">
<script type="text/javascript">
<!-- to hide script contents from old browsers
  document.write("Hello World!")
// end hiding contents from old browsers  -->
</script>
</pre>

加上 prettyprint 為文字上色

<pre class="codeblock prettyprint">
<script type="text/javascript">
<!-- to hide script contents from old browsers
  document.write("Hello World!")
// end hiding contents from old browsers  -->
</script>
</pre>

加入 linenums:1 列出序列號 (:1 即由1開始, 改為 :10 便由序列號10開始)

<pre class="codeblock prettyprint linenums:1">
<script type="text/javascript">
<!-- to hide script contents from old browsers
  document.write("Hello World!")
// end hiding contents from old browsers  -->
</script>
</pre>

只是用 prettyprin, 得出一個簡單外框, 文字有上色效果

<pre class="prettyprint">
<script type="text/javascript">
<!-- to hide script contents from old browsers
  document.write("Hello World!")
// end hiding contents from old browsers  -->
</script>
</pre>

用 <span class="nocode">...</span> 把全段或某一段包起, 便不會啟用上色功能

<pre class="prettyprint">
<script type="text/javascript">
<!-- to hide script contents from old browsers
  document.write("Hello World!")
<span class="nocode">document.write("Hello World!")</span>
// end hiding contents from old browsers  -->
</script>
</pre>

<pre class="prettyprint linenums">
<script type="text/javascript">
<!-- to hide script contents from old browsers
  document.write("Hello World!")
<span class="nocode">document.write("Hello World!")</span>
// end hiding contents from old browsers  -->
</script>
</pre>

載入 Google Code Prettify 可以加入不同的 Skin, 會有不同的版面結構.
http://google-code-prettify.googlecode.com/svn/trunk/styles/index.html

<script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js?skin=desert"></script>

<script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js?skin=sunburst"></script>

<script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js?skin=sons-of-obsidian"></script>

<script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js?skin=doxy"></script>

2014年9月1日

New Blogger Template : FlatUI 更新手記

近日更新了 Blogspot 的 Template(範本), 名稱是 FlatUI
http://www.stylifyyourblog.com/2013/04/FlatUI-Responsive-Blogger-Template.html

整體佈局, 個人萛是喜歡, 只是小小的, 修改了一些字型及色彩.
它的 post 以單圖 + 文章片段表列方式展示. 第一眼, 已經選定了它.

可是, 圖片總是怪怪的, 是正方型 200x200, 圖像變形, 不成比例, 細小圖像也會放大到 200x200.
動手修改了它的 javascript, 控制圖片大小部分程式碼, 順手留下一個手記.
~ 加大圖像到 300x300, 按比例顯示.
~ 不足300的, 便以原圖大小顯示.

原本的 javascript 是這樣子(部分節錄),
預設圖片寬度及高度都是 200;
取得圖像數量, 放到變數 img 裡;
讀出第一個圖像, 並以預設值顯示. 即是寬度及高度都是 200, 正方型.

img_thumb_height = 200;
img_thumb_width = 200;
var img = div.getElementsByTagName("img");
if(img.length>=1)
{ 
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
}

修改後的 javascript,
更改預設圖片寬度及高度是 300, 圖像比較大一點;
新增 2 個變數, img_width & img_height;
求出圖片寬度, 小於300便用回它原本的, 大過300便設定為300, 放到 img_width 裡;
求出圖片高度, 小於300便用回它原本的, 大過300便設定為300, 放到 img_height 裡;
如果原圖片的寬度 > 高度時...
即以 img_width 為準, 高度為 auto 顯示圖片;
否則, 便以 img_height 為準, 寬度為 auto 顯示圖片.

img_thumb_height = 300;
img_thumb_width = 300;
var img = div.getElementsByTagName("img");
if(img.length>=1)
{
if(img[0].width<img_thumb_width){img_width=img[0].width}else{img_width=img_thumb_width}
if(img[0].height<img_thumb_height){img_height=img[0].height}else{img_height=img_thumb_height}
if(img[0].width>img[0].height)
 {
 imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_width+'px" /></span>';
 } else {
 imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" height="'+img_height+'px" /></span>';
 }
}