2018年9月7日 星期五

修改並自定義 mac coding軟體sublime text 及 coda 2的emmet外掛

emmet for coda版本的外掛能夠自己定義預設的一些文字
 譬如輸入!按下Ctrl+e 通常會出現:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>

</body>
</html>

雖然很方便 但是有些地方還要自己修改,譬如上面的en
希望能夠ctrl+e後可以自動變成慣用或常用的語言(如:tw)

這時候可以透過修改emmet的snippets.json檔案來達成

原本coda內的emmet這個snippets.json是存在如下圖的位置



但是emmet的設定內可以自己在自訂的位置新增一個snippets.json檔案,
並且在裡面自己定義一些內容,步驟如下:

Step 1.
以lang舉例:
寫了lang的自定義如下,把原本的"lang":"en"改為"lang":"tw"(寫法可以參考上方原檔案內的方式),寫好後存成snippets.json放在自己想要的資料夾內。



Step 2.
在coda軟體上方選單列點選Emmet/Preferences,進入Emmet的設定



Step 3.
點擊Browser選取自己剛剛存的snippets.json所在的資料夾位置,
然後關閉這個設定視窗




之後只要重新啟動coda,新開一個檔案輸入! 然後按下ctrl+e
接者就會看到新的設定生效囉!!




PS. sublime text 基本上也是一樣的做法
在Package Settings內把emmet的Settings - Default所有內容copy一份
然後貼到Settings - Users內,
然後把裡面的"extensions_path": "~/emmet" 這一行
後面的emmet是預設的路徑,
把它改到snippets.json的存放資料夾即可




2018年8月9日 星期四

手機版網頁css bakcground fixed無法作用的問題

要在body設定background的背景圖為fixed
但是在手機版(ios)觀看會沒有作用,背景圖還是會跑

網路上搜尋到效果比較好的解決方式如下,做一下紀錄:
body:before {
  content: "";
  display: block;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: -10;
  background: url(../images/starBack.jpg) no-repeat center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  padding-bottom: 20%;
}
請注意z-index值為-10。
html根元素默認z-index為0.
此值必須是最小z-index才能將其為背景。

2018年8月2日 星期四

網站功能在inAppBrowser(line / facebook)內無法使用的問題

在使用www.addevent.com 的訂閱行事曆服務時
發現如果是用手機在line裡面點擊活動網址的連結,
那麼點擊裡面的「加入行事曆」按鈕功能會沒有反應
(目前是在iphone上行事曆的問題,若經由FB點擊連結可以正常操作)

原因是因為Line會開啟自身App內的瀏覽器。
因為這類的 inAppBrowser/UIWebView 瀏覽器跟一般手機內的瀏覽器APP不同
會導致一些JS功能失效。

下方搜尋到的文章有比較清楚的介紹
https://blog.user.today/inapp-browser-webview-problem/

先做一下紀錄。