一群棒子的技術部落格

Drupal

Drupal Commerce利用Commerce Discount來進行打折超簡單

簡介 Commerce Discount提供了使用者一個新的界面來定義、管理產品或是訂單層級的折價方式，使用上你只需要會懂一點Rules的UI界面即可。核心系統沒辦法提供的貨運或是產品條件的折價方式，但是只要使用這個模組解就可以解決大部分的折價問題。 使用方式 > 1. 安裝Commerce Discount模組 2. 再Srote/Discount新增一個折價方式 3. 選擇折價整筆訂單還是商品折價 4. 給予折價的條件 5. 折價多少 6. 是否與其他折價方式並用 以下是一個簡單的教學 首先我們先建立一個新的折價方式 取好折價的名稱，以及在結算時顯示的折價名稱 讓我們對整筆訂單進行折價，並且給予折價條件 讓我實際結帳一次試試看 如此一來一個簡單的折價方式就已經完成囉，如果有需求可以搭配Commerce Discount Extra [https://www.drupal.org/project/commerce_discount_extra]一起使用 可能遇到的問題 經過實際的測試把玩之後有發現了以下這些小問題，不過並不影響整個模組的運
Language

利用GreenSock JS動畫庫製作酷炫的動畫特效（staggerFrom 使用篇）

GreenSock是一款功能強大的ＪＳ動畫庫，官網中有完整的文檔說明 [http://greensock.com/docs/#/HTML5/GSAP/] ，也有很多的 example使用教學。今天我們就來使用GreenSock來建立簡單的動畫效果。 首先先到官網下載 [http://greensock.com/tweenmax]源碼 staggerFrom 使用篇 範例code-1: <body> /*接著我們先在html中生成以下demo架構*/ <div id="demo"> <div class="box">1</div> <div class="box">2&
pig • 4 min read
Dockerfile簡單介紹
Docker

Dockerfile簡單介紹

前言 經過前幾次的docker教學，相信大家都已經體會到，docker快速佈署環境的厲害。 其中docker image的可謂功勞重大。但如果今天要使用別人的image，可是卻不知道image的作者之前在裡面安裝了什麼？？就好比一個黑箱子，要你把手伸進去一樣，但你卻不知道自己會摸到什麼，很恐怖吧！ “人類最古老而強烈的情緒，便是恐懼；而最古老最強烈的恐懼，便是對未知的恐懼。”—霍華德·菲利普·洛夫克拉夫特 所以！這個時候就有Dockerfile出現了，可以讓大家知道這個image用了哪個版本的作業系統或基底，是誰製作了這個image，安裝了神麼東西，啟動時執行什麼。這樣一來，不管是誰要接手或利用你的image，就清楚透明許多。 什麼是Dockerfile? dockerfile簡單來說就是一個容器container自定義的安裝 由一行行命令語句組成，並且支援以 # 開頭的註解行。 他大致上會擁有四個東西 > * 基底映像檔 * 維護者（建議加入） * 操作指令 * 容器啟動時執行指令(不一定每個都有) 這四個東西，可以說是組成了dockerfile的重

還在用多台終端機去測試不同瀏覽器及作業系統的所呈現的頁面嗎？可以試試看微軟推出的Browser Screenshots 線上網?

開發網站時最困難的地方就是兼容各家瀏覽器及作業系統，尤其瀏覽器版本就可能讓顯示成效完全不同。 使用Browser Screenshots [https://dev.windows.com/zh-tw/microsoft-edge/tools/screenshots/] 可以讓我們對各家瀏覽器及作業系統做測試囉～ 使用教學 STEP1: 點擊網址Browser Screenshots [https://dev.windows.com/zh-tw/microsoft-edge/tools/screenshots/]進入頁面 STEP2: 將你要做測試的頁面網址貼上輸入框中 STEP3: 接著下方會出現各家的瀏覽器呈現頁面囉～～ ps:微軟也有推出ＩＥ各版本虛擬機包下載的地方唷～點下方連結即可進入 虛擬機器 [https://dev.windows.com/zh-tw/microsoft-edge/tools/vms/]
pig • 1 min read
CMS

Drupal 的好朋友 Drush 外掛，讓你管理 Drupal 有一套[Linux版]

什麼是Drush Drush是drupal在unix的環境下方便操作drupal的一個command line指令介面，drush提供了很多有用的指令code來操作modules/themes/profiles。同樣的他可以去更新你的drupal、執行sql指令、資料庫備份遷移，跟一些瑣碎的事情像是執行cron，清理快取等。drush也提供了第三方程式來擴充它的指令。 Drush這個名子怎麼來的?他有什麼意思? Drush就是Drupal跟Shell兩字的合體。shell翻作中文叫外殼顧名思義就是我們利用這個外殼來操縱drupal，讀音的念起來就像是”抓許” 安裝方式 目前Drush最新的版本已經到了8.X，而linux版本的安裝方式較為簡單只要照著官方指令一步一步來就可以安裝好囉。 輸入以下指令 下載安裝檔 wget http://files.drush.org/drush.phar 測試一下安裝檔 php drush.phar core-status 更改一下權限與路徑 chmod +x drush.phar sudo mv drush.phar /us
ubuntu預設安裝nginx版本太舊！？快來試試無痛升級nginx 1.8.1
Nginx

ubuntu預設安裝nginx版本太舊！？快來試試無痛升級nginx 1.8.1

ubuntu14.04預設安裝的nginx版本是1.4.6，看起來好像還可以 但是如今nginx的最新開發版本已經到了1.9.10，穩定版也到了1.8.1 我們今天的目標是讓nginx版本升級到1.8.1 並且能夠使用php5-fpm使php能夠正常運作 1.安裝Nginx Stable PPA sudo apt-get install python-software-properties sudo add-apt-repository ppa:nginx/stable sudo apt-get update sudo apt-get upgrade 2.升級nginx root@www:~# apt-get upgrade nginx Reading package lists... Done Building dependency tree Reading state
CMS

Drupal 的好朋友 Drush 外掛，讓你管理 Drupal 有一套[Windows版]

什麼是Drush Drush是drupal在unix的環境下方便操作drupal的一個command line指令介面，drush提供了很多有用的指令code來操作modules/themes/profiles。同樣的他可以去更新你的drupal、執行sql指令、資料庫備份遷移，跟一些瑣碎的事情像是執行cron，清理快取等。drush也提供了第三方程式來擴充它的指令。 Drush這個名子怎麼來的?他有什麼意思? Drush就是Drupal跟Shell兩字的合體。shell翻作中文叫外殼顧名思義就是我們利用這個外殼來操縱drupal，讀音的念起來就像是”抓許” 安裝方式 如果你沒接觸過其他作業系統的話會覺得有點憋扭，因為在windows下執行指令並沒有很直覺的方式。 在windows環境我們必須要借助其他程式來輔助我們，所以我們必須要安裝git [https://git-scm.com/download/win]以及 Composer [https://getcomposer.org/download/] 安裝Composer 當我們下載下來之後點擊安裝並且點擊下一步直到選擇PHP
CMS

剛開始玩drupal不知道怎麼下手？那就從安裝一個佈景主題開始吧！！

剛開始玩一個CMS系統時，都會碰到一件事，就是要從哪裡開始學習。 那就從安裝人家寫好的佈景主題開始吧！！可以從人家寫的佈景主題中慢慢的找到方向。 Step1：找尋喜歡的主題，下載它！ 點擊進入drupal theme大本營 [https://www.drupal.org/project/project_theme] 裡面很好多的佈景主題可以供你下載服用～ 這次教學的佈景主題以zen [https://www.drupal.org/project/zen]來做範例 點擊上方連結進入網站之後滾輪滾到下方點右鍵“另存連結”下載下來。 Step2：將解壓縮後的檔案放到指定資料夾目錄下，並修改內容。 將解壓縮下來的資料夾“zen”放到drupal 的根目錄底下 路徑：sites/all/themes/ 如附圖 接著進入zen資料夾底下將STARTERKIT資料夾整個複製出來到sites/all/themes/ 如附圖 接著將STARTERKIT更改資料夾名稱，例如:test 接下來要進入到test資料夾中，對裡面的這三個檔案做修改
pig • 2 min read
Apache

如何使用dockerfile與supervisor建立一個能自動啟動apache2的container

每次docker container關閉後開啟，總是要進去container內手動重新啟動apache2，為了減少自己的困擾與麻煩，我找到了2種方法。 > * 第一種 直接同步bash檔-v ~/file/bash.bashrc:/etc/bash.bashrc 在bash檔最下面加上service apache2 restart。 ps（最近發現，只要把更改過的bash.bashrc這個檔案ADD到Dockerfile裡面的/etc/bash.bashrc裡面，build起來的container，就可以直接使用/bin/bash自動啟動apache2啦） * 第二種 也就是我這次要介紹的，利用dockerfile與supervisor來建立一個container 第一步 建立一個放dockerfile的資料夾 mkdir test 在資料夾內建立一個dockerfile的檔案並編寫dockerfile cd test nano Dockerfile 簡單介紹一下dockerfile Dockerfile
Language

利用css3＋jQuery做出酷炫的loading bar ＋計數動態

以往的loading bar 都是死板板沒有什麼動畫特效的。 使用css3的“transform””,”transition”等屬性來實現具有動態效果的loading bar外加網路上找到的計數動態js code搭配起來特別有感覺～ 1.circle動態使用方式 //首先head中引入ＣＳＳ //class解析c100=灰色100%bar條 ; big=大圓（可更換small）會變小圓;green=顏色（可依個人喜好自行增加） 50//此ＩＤ是為了jquery控制，當抓到裡面的值多少時，會有多長的bar //控制bar長度的地方 //引入jquery.js 2.progress Bars動態使用方式 //首先head中引入ＣＳＳ //引入jquery.js
pig • 1 min read
Nginx

docker建立網站伺服器

docker 上上次提到過docker，並寫了一些介紹。 這次來寫寫如何在一台機器中安裝docker與使用docker快速佈署伺服器環境 當然在此之前，請各位大大可以先看看https://www.gitbook.com/book/philipzheng/docker_practice/details 這裡面說明了眾多docker的基本操作、概念與知識 廢話不多說， 安裝docker ubuntu中安裝很容易 curl -sSL https://get.docker.com/ubuntu/ | sudo sh 更多版本中裝docker? 當然，有些過於老舊的系統，可能不支援安裝docker。 這種時候，可能就要仔細看看docker的說明了 https://docs.docker.com/engine/installation/ubuntulinux/ 使用？ 我在這邊舉一個最簡單的例子 首先下載一個映像檔 docker pull ununtu:12.04 如果直接打docker
CMS

Drupal 如何改寫tpl並在node頁呈現content type名稱

前言 有時候需要會在node內頁顯示出我的內容類型名稱，可是drupal並沒有這個功能，這個時候我們就需要改寫tpl了，在這邊我們以zen的tpl當作範例 一開始本來是想要使用node.tpl.php來改寫的，不管怎麼改都沒有任何效果，此時才想起我的node頁已經被display suit改寫過了，所以才改使用page.tpl.php 可是這樣會導致另一個問題，如果改寫全部的page會造成連我的views page都會被修改到，所以找了一下solution找到了針對content type改寫page的tpl寫法 先看node針對type的命名方法 [https://api.drupal.org/api/drupal/modules!node!node.tpl.php/7] 可是對於我們的狀況page並不認得這種寫法，所以我們必須讓page tpl認得content type 首先我們要先在sites\all\themes\MYTHEME\template.php加入這段程式碼 MYTHEME記得要換成你的theme的名稱 function MYTHEME_preproces
CMS

drupal field-group module 使用教學

Field Group 是drupal強大模組之一，它給使用者帶來很多的方便性，像是當你外層還需要一層div包住內容時就很需要用到，而且還可以用這模組快速建立Accordion menu等。。 接下來我們就來一一介紹它的功能性吧 首先要先建立group_field Home » Administration » Structure » Content types » fieldset step1:建立好content_type接著到manege display設定 step2:設定值 step3:展示的效果如下 div step1:建立好content_type接著到manege display設定 step2:設定值 step3:展示的效果如下
pig • 2 min read
Language

利用jQuery 讓background-image達到responsive 效果

background-image在內容沒有設定height或裡面沒有物件時是不會顯示出來的。這種方式可以讓background-image得到height，並且在視窗縮小時自動跟著縮放。 Step 1:首先我們先在html裡面建立div <div id="img00"> <div class="img00Title"> </div> <div class="img00good"></div> </div> Step 2:接著針對div去寫background-image #img00Visual { background: url(../images/header/banner.png); @include background-size(cover); background-repeat:
pig • 1 min read

更改 Mac Screencapture 螢幕截圖的預設位置及預設格式

有使用Mac 電腦的人應該都跟我一樣，常常使用 Commend+Shift+3 ＆Commend+Shift+4 這個快速螢幕截圖的技巧吧，但是我最近卻常發現一個小煩惱，就是mac預設截圖的路徑是在桌面上，常常截的東西一多螢幕就亂成一堆小山，怎麼指向我要的資料夾呢？ Step 1: 打開終端機 Step 2: 在終端機中輸入： defaults write com.apple.screencapture location "絕對路徑" 範例圖： Step 3: 關掉終端機登出再登入就完成囉～～ 還有螢幕快照的檔案格式也是可以更改的，可依想要的格式去做更改唷～ 一樣開啟終端機輸入（依想要的格式去做更改）： defaults write com.apple.screencapture type jpg defaults write com.apple.screencapture type
pig • 1 min read
CMS

天殺的！這個時代誰還在用五毛來付錢的阿，Drupal Commerce去除小數點就靠他了

前言 相信大家多多少少有在網路上買東西的經驗，當你要打造一個自己的購物網站的時候，一定會遇到一個問題：天殺的這個時代誰還在用五毛來付錢的阿，可是在國外的貨幣是很稀鬆平常的事情，這個時候就可以用Commerce Price Decimals Formatter這個模組來幫助我，讓該死的小數點滾離我們的購物車。 這個模組是drupal commerce的擴充，他提供了commercee價錢的欄位顯示格式，你可以用他來顯示不同的小數點格式。 如果你不知道如何修改小數點，commerce有預設的模組可以修改小數點位置，可是無法去除小數點。 Commerce Price Decimals Formatter有以下功能 > * 顯示n個小數 * 顯示n個小數以及其他的組成 * views處理的訂單總計n個小數 * views處理的line item顯示n個小數 這個模組是需要drupal commerce模組才能使用的，當我們安裝好之後預設的價錢顯示格式是有兩個小數點的 而當我們裝好Commerce Price Decimals Formatter之後去管理顯示就可以看到Fo

利用compass生成sprites圖檔

用PS做一張sprites圖檔是一件很費工的事情。 compass可以幫我們輕鬆快速的解決這些問題唷～ 首先我們先在.scss文件上方引入 @import "compass/utilities/sprites"; 接著引入圖片路徑 @import "../images/my-icons/*.png"; 資料範例路徑如下圖： 接著compass之後會在資料目錄底下出現一張sprites圖檔，如下圖： 現在我們sprites圖生成之後要如何使用呢？？ 接著在你要引入的class中輸入以下代碼 //此範例圖檔名稱為1.png width: my-icons-sprite-width(1);//前面my-icons=文檔名稱，接著帶入sprite-width(1) 接著在解析出來的css中會看到剛剛compass出來的sprite圖跟座標。 .my-icons-sprite, .my-icons-delete, .my-icons-edit, .my-icons-new, .my-icons-save { background: url('/images/m
pig • 1 min read
Nginx

varnish nginx本機+nginx-docker

varnish+nginx+docker 會想提出這個架構是因為，如果今天有5個網站要裝varnish提昇效能，那麼5個container就多了5個varnish的安裝佔用記憶體，如果今天裝在外面，只要裝一次varnish的空間，就能應付5台，效能需要提昇的container。 varnish+nginx+php5-fpm裝同一台container內 varnish(本機）+nginx+php5-fpm 圖表化 快取清除問題，因為是使用在drupal上，剛好varnish4.x的快取清除是掛在drupal的設定>開發>效能模組上，這個模組可以定時刪除快取。 當然如果今天不想使用外面的varnish快取，只要不勾選drupal 設定>開發>效能裡面的”匿名使用者頁面快取”varnish就不會快取這個網站。 當然快取混雜問題，目前使用兩個不同網站，並沒有發生這個問題。 varnish是反向快取伺服器 這邊安裝是4.0.2版 （查詢varnish版本指令 ：/usr/sbin/varnishd -V) /usr/sbin/

drupal8 創建一個外觀/主題

如何在drupal8中建立一個全新的外觀 創建主題info 在theme的資料夾下建立一個主題的文件夾名稱，例如”pig”接著進入pig資料夾裡面建立一個*.info.yml文件。 該文件夾應具有相同的名稱作為*.info.yml文件。 所以，如果你的主題被命名為“pig”，那麼文件夾命名為pig.info.yml文件。如果該文件存在於您的主題將在你的網站管理>外觀 路徑示意圖： *.info.yml範例： name: pig type: theme description: A cuddly theme that offers extra fluffiness. core: 8.x libraries:   - pig/cuddly-slider stylesheets-remove:   - '@classy/css/components/tabs.css&
pig • 2 min read
CMS

Drupal Form API

Form API Drupal 擁有一個application programming interface(API)來產生，驗證，處理HTML表單。Form API 抽象來說就是崁入陣列的屬性(properties)和值(value)。這個陣列會讓Drupal呈現出form。有以下幾點: > * 利用個陣列讓form engine產生HTML * 結構化處理資料，可以編輯修改表單 * 任何form的元素可以對應任何theme function * 可以附加驗證或處理到任何form * 針對注入攻擊保護form 了解Form運作 Form:建立、驗證、運行 Form API的運作流程 Drupal的form有三個步驟:驗證、提交、重導向。 可以使用drupal_get_form [https://api.drupal.org/api/drupal/includes%21form.inc/
Apache

memcache 介紹與安裝

memcache 介紹 Memcached 是 danga.com(運營 LiveJournal 的技術團隊)開發的一套分佈式內 存對象緩存系統,用於在動態系統中減少數據庫負載,提升性能。 Memcached 是什麼 很多人把 memcached 當作和 SharedMemory 那種形式的存儲載體來使用,雖然 memcached 使用了同樣的“Key=>Value”方式組織數據,但是它和共享內存、 APC 等本地緩存有非常大的區別。Memcached 是分佈式的,也就是說它不是本 地的。它基於網絡連接(當然它也可以使用 localhost)方式完成服務,本身它 是一個獨立於應用的程序或守護進程(Daemon 方式)。 Memcached 在很多時候都是作為數據庫前端 cache 使用的。因為它比數據庫少 了很多 SQL 解析、

常用Git 命令清單

我每天使用Git ，但是很多命令記不住。 下面整理的常用Git 命令清單。 幾個專用名詞的譯名如下。 Workspace：工作區 Index / Stage：暫存區 Repository：倉庫區（或本地倉庫） Remote：遠程倉庫 一、新建代碼庫 #在當前目錄新建一個Git代碼庫 $ git init #新建一個目錄，將其初始化為Git代碼庫 $ git init [ project - name ] #下載一個項目和它的整個代碼歷史 $ git clone [ url ] 二、配置 Git的設置文件為.gitconfig，它可以在用戶主目錄下（全局配置），也可以在項目目錄下（項目配置）。 #顯示當前的Git配置 $ git config -- list #編輯Git配置文件 $ git config - e [--
pig • 5 min read