skyroxas1521

skyroxas1521

31 posts published

[SEO] 初步理解  Microdata 與 Schema.org  達到搜尋引擎優化

[SEO] 初步理解 Microdata 與 Schema.org 達到搜尋引擎優化

什麼是 Microdata: Microdata 為 HTML5 的一部分,至於 Microdata 等標籤的作用 簡單來說: 我們一般用來顯示資料的 HTML 等標籤是給我們 人 看的 , 而 Microdata 等標籤則相反,是專門為 機器 等各大搜尋引擎觀看而設計的 官方實例: <div> <h1>Avatar</h1> <span>Director: James Cameron (born August 16, 1954)</span> <span>Science fiction&

JavaScript 操作剪貼簿複製文字

JavaScript 操作剪貼簿複製文字

前言: 現今要使用 JavaScript 實現 剪貼簿複製文字 非常的容易 網頁編輯器 有提供 JavaScript 的 API document.execCommand() , 可以輕易的讓我們進行 文字編輯器 的操作,其中也包含了 剪貼簿複製文字 的操作 參考連結: MDN Document.execCommand() 實例: 以下為範例: Code : <div> <input id ="copyInput" value ="文字1"> <button onclick='copyInput()'>複製</button> </div> <

WordPress 使用 cookie 製作使用者瀏覽紀錄

WordPress 使用 cookie 製作使用者瀏覽紀錄

功能論述: 「使用者瀏覽紀錄」功能,可以幫助 使用者 快速的找到曾經閱讀過的文章,對於 更新速度快 與有著 大量文章篇幅 的 網站 與 應用 當中,在使用者體驗上有著十分出眾且直接的幫助 開發方向: 已開發者的角度而言,我們要先做的事如下: 使用者 點擊過的文章 存入到 瀏覽器的 cookie 中 再將 存入 cookie 裡的文章,Query 到我們的頁面之中 以上兩點是主要方向 開發紀錄: 以 JavaScript 前端的方式進行實作 取得當前 文章 的 ID : 當使用者在進入文章內頁時,取得 文章 的 ID , 將此 ID 作為變數傳給 JavaScript 的檔案

JavaScript 將 JSON Object 轉為 Arrary

JavaScript 將 JSON Object 轉為 Arrary

情境: 為了可以用 陣列(Array) 的方法對 JSON 的物件進行操作,我們必須先把 JSON 物件,轉換為 陣列(Array) 說明: 拿下面 JSON object 為例: var jsonObj = {"0":"1","1":"2","2":"3","3":"4"}; 如果我想取得這 Object 的 length: console.log(jsonObj.length); 回傳的結果會是: undefined 這是因為 length,是 陣列(Array) 底下的屬性,也就是說如果我們要使用 陣列(Array) 的方法來對 JSON 的物件進行操作,

[Mac] 解決 zsh command not found
develop tool

[Mac] 解決 zsh command not found

前言: Mac 預設的 shell 為 bash , 但由於 zsh 有 oh-my-zsh 提供各種不同配合各種開發工具的 theme 如:git 等等,所以許多人會從 bash 轉到 zsh 不過有時在安裝一些開發工具時,你必須開發工具的 環境變數 的 path , 加到 zsh 的 shell ,不然常常在 終端機 下 command 時,會出現 : zsh: XXX command not found 其實 bash 有時也會有同樣的問題 查看 shell 查看整體環境變數: printenv 你可以看到 shell 的屬性為: SHELL=

穿透的 div ( pointer-events )

穿透的 div ( pointer-events )

pointer-events pointer-events 為控制滑鼠目標的 CSS3 屬性 The pointer-events CSS property specifies under what circumstances (if any) a particular graphic element can become the target of mouse events. 雖說大部分為製作 SVG 時使用,不過在特定情況時在 div 上使用也是可以的 製作穿透的 div 穿透的 div 這需求非常常見,例如:連結上著遮罩,或是製作選單在展開前把選單藏在畫面上,都是用的到的 使用 pointer-events 很容易就可以達到我們想要的效果 pointer-events:auto auto 為 pointer-events 的預設值,

jQuery事件處理技巧:Decide resize (and scroll)

jQuery事件處理技巧:Decide resize (and scroll)

情境: 相信大家對 jQuery 的 resize 與 scroll 等事件並不陌生,近期在開發 jQuery Plugin 時 , 碰到一個問題 , 我需要在 resize 事件發生時 , 針對 視窗的 放大 與 縮小 , 執行不同的 method 與 event 這類的需求,其實是非常常見的,像是 scroll 事件中,只針對滾輪在 往上 滾動時,讓隱藏的選單出現於畫面中,就是我們在使用網頁的使用者體驗中,最常見的例子 作法 : 此部份我以 resize 事件為範例, 同邏輯 scroll 事件也適用下列方法 範例: (function($){ var previousDimensions = { width: $(window).width(

Git Alias 簡化你的 Git 指令
GIT

Git Alias 簡化你的 Git 指令

前言: 如標題,就是進一步增加你使用 Git 的體驗,簡化 Git 的指令,使你在操作上更簡潔更便利 簡單來說: 我們可以把 $ git status 簡化成: $ git st 使你在使用 Git 上能更便利更簡單更上手 如何使用: Git 命令別名 下面提供 2 種方式,進行操作 1. git config : 我們可以直接使用 git config 來設定我們的 命令別名 指令如下 : $ git config --global alias.{指令別名} {指令} 範例如下 : $ git config --global alias.st status 只需簡單一行指令,就可以達成我們的效果

WordPress 學習筆記: wp_list_categories add class

WordPress 學習筆記: wp_list_categories add class

情境 : 分類列表 在 Web 中非常的常見,而 WordPress 在針對 分類列表 處理上 , 提供了一個方法叫做 wp_list_categories() , 這也是我在 WordPress 中第一次製作 分類列表 Google 關鍵字 wordpress categories list ,第一筆就找到的,wp_list_categories() 這個方法在使用上十分的容易,也提了許多的屬性 (例如:層級、排序、還有分類文章總數…等等) 不過我很快就遇到了問題…… 問題 : 在製作 WordPress Theme 時 ,個人都是搭配 BootStrap 進行前端的開發,所以時常需要直接針對特定的 Html 元素 加入特定的

SVG 入門 : 基本圖形繪製
SVG

SVG 入門 : 基本圖形繪製

簡介: SVG 可縮放式向量圖形 ( SVG , Scalable Vector Graphics ) 是前端工程師不可錯過得技術,不只因 圖片向量 使圖片不會因放大縮小而失真外,SVG 為原本不足的 HTML 帶入了新的概念 — 利用標籤來做圖 從簡單的直線、曲線、圓形、矩形,到複雜的任意路徑、填充樣式、座標轉換與動畫,我們可以利用標籤的形式來完成 而且因 SVG 的圖片是由 標籤 組成,所以我們可以對圖片裡的任何物件進行操作,也可以配合 Css 與 javaScript 達到更多的效果與互動 入門: 個人認為 實做 是最好的學習途徑, 我們可以重最簡單的圖形繪製開始 SVG 標籤 在網頁中插入 SVG 圖形 <svg> ....... </svg&

WordPress 學習筆記: 將 php 的 Variable 傳遞給 JavaScript 檔案

WordPress 學習筆記: 將 php 的 Variable 傳遞給 JavaScript 檔案

前言: 如標題,在做任何應用的開發,對工程師而言這種需求並不少見,而在 WordPress 開發中,更是常見,因為很多 WordPress 的 Variable 與 Method , 都是經 php 開發後所提供 情境: 最典型的例子就是 get_template_directory_uri( ) 了 : 這是 WordPress 用來回傳 版型根目錄 所提供的 Method,在 JavaScript 的開發中,尤其是在 Ajax 的應用,往往都會需要 檔案目錄的路徑 來協助提取我們要的資料 那如何將 get_template_directory_uri( ) return 的結果回傳給 JavaScript 呢 ? 方法一:Ajax

WordPress 學習筆記: 如何在 WordPress 中 引入 JavaScript 檔案

WordPress 學習筆記: 如何在 WordPress 中 引入 JavaScript 檔案

前言 : 如果你是有一般 Html 跟 JavaScript 基礎你應該都知道,我們在 Html 上開發 JavaScript 時之前 , 除了直接在 script 標籤裡直接開發外,就直接用以下方式引入 JavaScript 的檔案: <script src="myscripts.js"></script> 雖然使用這種方法在 WordPress 中也是行得通,不過你可能會碰到以下的問題: 檔案路徑的問題 因為 header.php 與 footer.php 重複使用 , 導致 js 在不必要時候載入 使用 WordPress 內建方法 : WordPress 本身就有提供 引入 JavaScript 的 Action

還在找 Loading 素材嗎? loading.io 快速產生客製化 Loading 素材,支援 GIF、CSS 、SVG
平台

還在找 Loading 素材嗎? loading.io 快速產生客製化 Loading 素材,支援 GIF、CSS 、SVG

還在找 Loading 效果的圖片嘛 ? 不會製圖? 樣式太少? 顏色不對? 沒關西 ! loading.io 提供你快速產生你想要的 loading 效果 loading.io可以做什麼? 你可以選擇 loading.io 提供的任何樣式並對它進行客製化,包含: 圖片大小 圖片背景 圖片物件顏色 與圖片的執行速度 等等… 並且決定要匯出的格式,包含: CSS SVG GIF 因為它網站操作界面還滿清楚的,所以在這就不多介紹了~ 在此推薦此好物 前端工程師懶一點有什麼錯 XD

jQuery事件處理技巧:Delay scroll (and resize)

jQuery事件處理技巧:Delay scroll (and resize)

目的: 優化 jQuery scroll 與 resize 的事件觸發 大幅減少重複的代碼,達到效能優化 參考文章:delay-scroll-handlers-javascript 底下文章皆以 scroll 事件為例: 情境: 我們在開發互動式網站時,通常 scroll 事件都是少不了的,現在很多 UI 的設計都會對 滾動 這個事件進行客制化,畢竟他是使用者與網站最主要的互動。 在程式端,如果你使用是 jQuery 一定都是使用 .scroll(),來進行事件驅動,如下: $(window).scroll(function(){ console.log('scroll event') }) 不過其實這並不是一個好作法,因為當事件觸發時,你的代碼可能就會一次執行好幾次: scroll 事件觸發時,每 ms (微秒) 就會執行一次 我滾動了滑鼠滾輪 1

WordPress學習筆記:使用jQuery實做ajax無限捲軸

WordPress學習筆記:使用jQuery實做ajax無限捲軸

目的: 使用jQuery在 WordPress 中實做ajax無限捲軸 參考文章:getting-loopy-ajax-powered-loops-with-jquery-and-wordpress–wp 一、前製準備: 在網站版型目錄下新增一個 .php 的 file (此以 loopHandler.php 為此 php 檔案做命名) 在網站版型目錄下新增一個 js 目錄以存放所需的 js 檔案 於 剛新增的 js 目錄下新增一個 .js 的 file (此以 ajaxLoop.js 為此 js 檔案做命名) 在 WordPress 中引入 javascript 檔案 需要在 function.php 中進行引入: 在引入 ajaxLoop.js

使用 node.js 建構 TCP Server
Language

使用 node.js 建構 TCP Server

目的: 使用 node.js 建構簡單的 TCP server 藉由建制的過程初步運作與了解 TCP 所謂的 “三次握手” TCP 傳輸協定: 概述: 傳輸控制協定(英語:Transmission Control Protocol,縮寫為 TCP),是一種連接導向的、可靠的、基於位元組流的傳輸層通訊協定 運作方式 : TCP用三路握手(three-way handshake)過程建立一個連線。 如圖示,分為三個階段: 第一階段:client端 向 server端 請求連線 第二階段:server端 向 client端 回應,告知 server 端 可以開始 傳輸資料 第三階段:client端

Language

Javascripts JSON.Stringify() 與 JSON.Pares()

什麼是 JSON : JSON 是個以純文字為基底去儲存和傳送簡單結構資料,你可以透過特定的格式去儲存任何資料(字串,數字,陣列,物件),也可以透過物件或陣列來傳送較複雜的資料。一旦建立了您的 JSON 資料,就可以非常簡單的跟其他程式溝通或交換資料,因為 JSON 就只是純文字個格式 JSON.Stringify() 與 JSON.Pares() : 上述的 JSON 是一個型別(Type),是一個 Array Type。我們不能儲存或傳送「Type」,所以要將 Type 轉成字串(String)後,才能儲存或傳送。 例如,對電腦來說,這是一個物件(Object): { "name": "Roxas" } 這個物件轉成字串: "{ "name": "Roxas" }" 對電腦來說,這才是字串。所以,將

Language

python 簡易爬蟲筆記

目標 : 存取指定網頁的 element 的 value 為 json , 並將其匯出成 json 檔案 Step 1 安裝套件: 使用 pip3 安裝下列套件 requests : python 用來處理一般 service 請求的套件,相關資訊可查看 requests 快速上手 安裝 : $ pip3 install requests beautifulsoup4 : Beautiful Soup 是一个可以从 HTML 或 XML 文件中提取数据的 Python 库.它能够通过你喜欢的转换器实现惯用的文档导航,查找,修改文档的方式.Beautiful Soup 会帮你节省数小时甚至数天的工作时间.相關資訊可查看 python:BeautifulSoup 模块使用指南 安裝 : $ pip

Language

python 3 新手筆記(一)

Ubuntu 安裝 python 3: ( 更新 : Ubuntu 13.04 版本起, 已有預載 Python 3 , 不用自已安裝了, 使用 python3 指令就可以了。) Ubuntu 11.10 版預載的 Python 是 2.7.x 版,使用下方指令升級: sudo apt-get install python3-all 必裝的 python 套件: pip (軟體包管理系統): pip是一個以Python電腦程式語言寫成的軟體包管理系統,他可以安裝和管理軟體包,另外不少的軟體包也可以在「Python軟體包索引」(英語:Python Package Index,簡稱PyPI) 安裝指令: $ sudo apt-get install python3-pip

Language

jQuery plugin scrollClass

github :link連結 Description : 滾動事件發生時對當前畫面指定的元素加入對應的Class Options : Name type default description className string null 指定需要加入的 class 名稱 (必填) delay number 0 延遲加入class的時間 單位:微秒 increment Bollin false 延遲時間是否遞增 Example : Basic $('.article-wrapper.avatar').scrollClass({ 'className': 'animate_right', }) Basic Options $('.article-wrapper.avatar').scrollClass({ 'className': 'animate_right', 'delay': 350, 'increment': true }) Function Description

Language

jQuery Plugin scrollState 滾動狀態bar

github :link連結 Description : 於頁面上方加入物件來顯示頁面滾動軸的進度,以增加使用者體驗 Options : Name type default description color string ‘#4A8CB4’ 物件顏色 bold string ‘4px’ 物件粗細 index string ‘100’ 物件 z-index 屬性 值 transition string ‘1s’ 物件 transition 屬性 值 (過度時間) Example : Basic $('body').scrollState(); Basic Options $('body').scrollState({ 'color'

WordPress 學習筆記 :文章列表加入 even 與 odd 的class
WordPress

WordPress 學習筆記 :文章列表加入 even 與 odd 的class

目的: 為文章列表項目以基數偶數區分加入 odd 與 even 的 class 已達到更客製化的前端效果 1、使用函數: WP_Query 裡的 $current_post 屬性: 取於wordpress官方屬性說明: (available during The Loop) Index of the post currently being displayed. 直接翻譯來說就是顯示於迴圈內的文章索引,從 0 開始 1、2、3、4、5、6、7…..照順序排列 2、於 have_posts() 迴圈裡使用 $current_post 屬性進行運算 於

WordPress

WordPress 學習筆記 : 文章摘要 the_excerpt()

excerpt (摘要) <?php the_excerpt(); ?> 使用方式如同 //文章標題 <?php the_title?> //文章內文 <?php the_content?> 另外如果沒有使用 wordpress 預設的 文章摘要 區塊,則會直接擷取文章內容的文字使用 修改文章摘要後綴文字 wordpress the_excerpt() 原生摘要後綴為 […] 的方式顯示,如果要更改後綴文字方式: 在 function.php 檔案裡建立一個 function <?php function excerpt_more-example(){ return "read_more"; } ?> 在使用 wordpress