pig

pig

31 posts published

響應式網站-不可缺少的Veiwport標籤
Html

響應式網站-不可缺少的Veiwport標籤

什麼是Viewport標籤? Viewport它是網頁HTML的一種META標籤,專為手機瀏覽器設計的。 有些屏幕很小的手機,但解析度卻可以做得很大,比如iphone7默認分辨率為:1920 * 1080,比許多電腦桌面的都還大,傳統PC網站直接放到手機上閱讀時,界面就會顯得非常小,閱讀體驗就很差,這時候就會需要一種將原始視圖在手機上放大的機制,使用Viewport標籤可以解決這個問題。 如何使用Viewport標籤? 將code放置在head裡面即可,如以下範例。 此範例的設定就會依照手機螢幕的解析度去做相對應的縮放了 !<!DOCTYPE html> <html> <head> <title>viewport</title> <meta name="viewport" content="width=device-width, initial-scale=1.0">

WordPress

【WordPress筆記】 利用shortcode 的方式將指定的post type 文章顯示在頁面中

前言 當WordPress頁面都是用shortcode疊出來的時候,你的文章(post)也是需要變成shortcode的情況下才有辦法將它卡到頁面的某個地方,以下方式可以將你的文章(post)轉成shortcode的方式,讓你在頁面中可以方便的調用它!! 以下範例code,可以寫至theme目錄下的functions.php中 function home_post_listing_shortcode( $atts ) { ob_start(); <!--將query 到的資料存到$query--> $query = new WP_Query( array( 'post_type' => 'post', <!--post_type輸入你想要抓取的文章類型--> 'posts_per_page' => 3, <

Language

2種方式讓header的高度跟著瀏覽器的高度顯示

利用css 的方式 #header { height: 100vh; /* 高度100vh header高度就會跟著瀏覽器視窗高度去顯示囉 */ background-color:#000; } 利用 jQuery 的方式 //利用jQuery抓取視窗高度再將取到的高度賦予#header 的height function setHeiHeight() { $('#header').css({ height: $(window).height() + 'px' }); } // 加載頁面時執行上面定義的function setHeiHeight(); // 當拖動視窗時jQuery 也會隨著視窗拖動去執行resize function讓header高度一直跟瀏覽器高度一直保持同步狀態 $(window).resize( setHeiHeight ); }

Language

利用CSS3 Multiple Backgrounds 實現多背景效果

目的: 解決設計圖背景複雜的設計時可以使用CSS3 Multiple Backgrounds的方式去處理 案例 設計圖左右各有兩條虛線時可使用兩張不同的背景圖 <!DOCTYPE html> <html> <head> <style> #example1 { background: url(left_line.png) left center no-repeat, url(left_right.png) right center no-repeat; //利用【逗號】的方式區分他是屬於第幾個背景圖,並且給予不同的位置設定一個靠左置中、一個靠右置中 } </style> </head> <body> <

CMS

UX/UI系列:Drupal必裝模組之一『Administration menu』,讓您享受便利、快速的管理者操作選單!

前言 身為一個工程師帶給客戶便利就是就是帶給自己便利,『Administration menu』可以讓您在使用drupal管理者選單時省去多餘的步驟,直接到您想要進入的設定中,此模組安裝完開啟之後便可直接使用,非常方便,讓我們來看看怎麼操作吧! 安裝模組 首先我們先到Administration menu [https://www.drupal.org/project/admin_menu] 去安裝此模組。 step1:複製模組連結 step2:接著到Home » Administration » Modules貼上連結,並按下install step3:完成之後開啟相關模組及關閉drupal原生的menu設定 開啟相關模組: 關閉drupal原生模組: 以上步驟完成之後相信您已經可以看到有什麼地方不一樣拉~ drupal預設: 使用Administration menu後 結語 看完以上教學之後希望大家都可以自己動手試試~安裝自己的第一個Administration menu。 使用過後都會說:瑞凡:我們回不去了~~

Language

推薦12個jQuery小應用

jQuery是一個快速,輕巧,功能豐富的JavaScript庫。它的功能包含了HTML文檔遍歷和處理,事件處理,動畫、Ajax和一個易於使用的API,跨瀏覽器兼容等。隨著通用性和可擴展性的結合,jQuery的改變數以百萬計的人寫JavaScript的方式。 此篇主要介紹12個jQuery運用的方法: 返回頂部 使用JQuery的動畫的scrollTop的和方法可以創建簡單地返回頂部的動畫: // Back to top $('a.top').click(function (e) { e.preventDefault(); $(document.body).animate({scrollTop: 0}, 800); }); HTML中生成一個按鈕: Back to top 可以改變scrollTop的的值來定位滾動條的位置。 圖片預加載 如果頁面使用了很多不是最初加載便可見的圖片,有必要進行預加載: $.preloadImages = function () { for (var i = 0; i < arguments.leng

Language

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

GreenSock是一款功能強大的JS動畫庫,官網中有完整的文檔說明 [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&

還在用多台終端機去測試不同瀏覽器及作業系統的所呈現的頁面嗎?可以試試看微軟推出的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:微軟也有推出IE各版本虛擬機包下載的地方唷~點下方連結即可進入 虛擬機器 [https://dev.windows.com/zh-tw/microsoft-edge/tools/vms/]

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資料夾中,對裡面的這三個檔案做修改

Language

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

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

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:

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:展示的效果如下

更改 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

利用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

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&

常用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 [--

drupal8 設定關閉快取跟開啟twig debug

當我們每次改完twig外觀時,頁面都要重新清除快取一次頁面才會呈現出來。這篇主要寫關閉快取跟開起twig debug。 step1.首先到sites=>default 資料夾下複製一份default.services.yml改名為“services.yml” step2.接著開啟”services.yml“ 修改 twig.config: debug: true auto_reload: true cache: false 設定完成圖如下: step3.再到頁面去清除一次cache,檢視元素之後就會發現twig debug 的註解頁面 清除快取方式:configuration=>Performance 點擊clear all caches step4.再到page.html.twig下輸入一段文字 再到瀏覽器上直接刷新頁面就會直接出現剛剛修改的內容囉~不用在每次修改twig就要清一次快取頁面才會出現~

利用Acquia Dev Desktop 2 快速在本機建立drupal

利用Acquia Dev Desktop 2 快速在本機建立drupal7,drupal8 step1:首先我們先到acquia [https://www.acquia.com/downloads]下載Acquia Dev Desktop ,依使用者的作業系統點擊下載 step2:下載完成後點擊安裝 step3:接著一直點擊Next>來完成安裝動作 step4:安裝完成之後會進入下圖的頁面 step5:點擊install可以進行你要安裝的drupal版本等…. step6:接著會進入到下圖頁面Local codebase folder:安裝的檔案路徑Local site name site 名稱Use php 可以選擇想要使用者php版本 5.3~7.0皆可選Database 可以選擇新建資料庫等。New database name 可以輸入新建資料庫的名稱 完成之後按下 finish step7:

利用drush 安裝drupal

利用drush指令 安裝drupal step1:首先先用終端機到你要安裝drupal的目錄下 cd  /Users/qkqkzzzz/Sites/drupal/ step2: 輸入 drush dl drupal step3:到剛剛安裝的drupal-7.41目錄底下 step4:接著輸入 drush site-install –db-url=mysql://root:123456@localhost/drupal8 root = 資料庫使用者 123456 = 資料庫密碼 drupal8 = 資料庫名稱 step5:接著drush 會自動生成drupal 帳號&密碼(admin/BqpRLK4qMo)

利用JS在input裡面新增placeholder屬性

CMS無法任意改寫input裡面的placeholder的屬性時可以使用這種JS的方式寫入。 //首先取得可以控制的id或class //使用ID的寫法 document.getElementById("edit-name").placeholder = "帳號"; document.getElementById("edit-pass").placeholder = "密碼"; //使用class的寫法 document.getElementsByClassName("edit-name").placeholder = "帳號"; document.getElementsByClassName("edit-pass").placeholder = "密碼"; 完成之後就可以在input裡面看到placeholder新增的名稱囉~