2018年10月31日 星期三

[DeTools] 金庸武俠世界裡的主要門派分布地圖



看到有人貼了一張金庸門派的地理位置圖,我就用 google map 也做了一個動態版的金庸武俠世界裡的主要門派分布地圖,建點的時候有參考原本那張圖,然後也有 google 一下小說的描述和位置,應該大致上是正確的,有缺或需要補的可以再跟我說。

Read more

2018年10月30日 星期二

[jQuery Plugin] 倒數計時- jQuery.countdown



要使用倒數計時功能找到一隻很方便的 plugin- jQuery.countdown,基本的使用方法是把 plugin 讀入後像這樣寫:

  1. $("#getting-started")   
  2.   .countdown("2017/01/01"function(event) {   
  3.     $(this).text(   
  4.       event.strftime('%D days %H:%M:%S')   
  5.     );   
  6.   });  

可以依據自己的需求去顯示時分秒甚至是週、月、年都可以。

若是要在一個頁面裡面顯示很多個倒數計時,這個若是在做活動頁面應該會有機會用到,寫法如下:

  1. <div data-countdown="2016/01/01"></div>  
  2. <div data-countdown="2017/01/01"></div>  
  3. <div data-countdown="2018/01/01"></div>  
  4. <div data-countdown="2019/01/01"></div>  

  1. $('[data-countdown]').each(function() {   
  2.   var $this = $(this), finalDate = $(this).data('countdown');   
  3.   $this.countdown(finalDate, function(event) {   
  4.     $this.html(event.strftime('%D days %H:%M:%S'));   
  5.   });   
  6. });  

有需要的話再去調整每一個時間顯示的樣子,想看更多範例可以看官方文件

我有把這個做在 Pokemon GO 活動列表上。
Read more

使用 vis.js 建立時間軸



時間軸 UI 用過幾個,這次是想要一個可以作區間的但又不是像 full calendar 那麼複雜的介面,類似甘特圖的 UI,找來找去就找到這個 vis.js,但他不止能做時間軸,還可以做類似心智圖或其他圖表的功能,這邊先就時間軸來說明一下。

一樣將 js 跟 css 讀入後,像這樣使用就可以了。

  1. var container = document.getElementById('visualization');   
  2.   
  3.   // Create a DataSet (allows two way data-binding)   
  4.   var items = new vis.DataSet([   
  5.     {id: 1, content: 'item 1', start: '2013-04-20'},   
  6.     {id: 2, content: 'item 2', start: '2013-04-14'},   
  7.     {id: 3, content: 'item 3', start: '2013-04-18'},   
  8.     {id: 4, content: 'item 4', start: '2013-04-16', end: '2013-04-19'},   
  9.     {id: 5, content: 'item 5', start: '2013-04-25'},   
  10.     {id: 6, content: 'item 6', start: '2013-04-27'}   
  11.   ]);   
  12.   
  13.   // Configuration for the Timeline   
  14.   var options = {};   
  15.   
  16.   // Create a Timeline   
  17.   var timeline = new vis.Timeline(container, items, options);  

其中 content 是用來放要顯示的內容,有 start 跟 end 的話就會顯示一個區間,只有 start 的話就會顯示一個點,區間是包含時分秒的,也就是如果給到幾點幾分幾秒,會在時間軸上算到一個位置把點放上去。

option 那邊可以設定時間軸的樣子。

  1. var options = {   
  2.   width: '100%',   
  3.   height: '30px',   
  4.   margin: {   
  5.     item: 20   
  6.   }   
  7. };  

預設的時間軸是你上面有多少內容,他會一次顯示給你看,如果上面太多東西一次看到的範圍就會太大而且會包含已經發生過的事情,所以如果想要設定開始時間跟範圍的話,可以像這樣給一個 start 的值。
  1. var options = {   
  2.         start: yourtime,   
  3. };  

更多文件及設定資料可以看官方說明

我有把它用在 Pokemon GO 活動列表
Read more

2018年10月29日 星期一

2018年10月28日 星期日

鐵啞鈴社群日

因為第一次社群日很多地方伺服器塞爆出包,N 社破天荒辦了兩次鐵啞鈴的社群日,不過由於第一次我待的地方網路很順,加上這次給的彗星拳誠意十足,所以兩次加起抓了很多也抓的很開心。





總計抓了 16 隻色違。

IMG_8638IMG_8640IMG_8641IMG_8642IMG_8646IMG_8647IMG_8651IMG_8655IMG_8724IMG_8725IMG_8727IMG_8728IMG_8729IMG_8730IMG_8738IMG_8739

還有換到兩隻亮晶晶跟一隻 iv96 的。
IMG_8734IMG_8735

Read more

[Metal Robot 魂] ヒュッケバイン(凶鳥)

P1190428

以往一直 pass 的 Metal Robot 魂系列,這次看到ヒュッケバイン(凶鳥)就閃躲不能了,因為凶鳥是我剛踏入機戰時的主角機,也就是第四次機器人大戰時候的真實系主人公機體,當時其實也不大認識鋼彈和什麼機器人作品,只是因為主角一定不管在什麼路線都是跟著的,加上印象很深刻是在有一話叫榮光的落日那關,我的己方全掛當時就是靠凶鳥一對一幹掉鐸雷克戰艦而讓我愛上這架機體。

P1190437

P1190400P1190401
Metal Robot 魂顧名思義就是 Robot 魂的多了很多金屬材質版本,所以價位大概也貴了一倍,更討厭的都是魂商店販售,也就是還要忍受那個比一般網拍貴一倍以上的運費。
Read more

2018年10月26日 星期五

2018年10月25日 星期四

2018年10月24日 星期三

2018年10月21日 星期日

我的網路與社群紀錄(一)


從國中有電腦開始上網以來,紀錄一下幾個大階段的網路社群記事。

首先是高中時期的奇摩家族,當時應該很多人的班板都在上面,記得還有不少正妹圖可以看,我也成立了不少有的沒有的奇摩家族,只是時代有點久遠我也忘得差不多了。而奇摩家族也因為在 2011 左右關閉後,這些回憶也就慢慢消失了。

▼ 僅示意圖非我成立的家族,圖片來自 mobile01



再來是上大學後的 bbs 時代,大一的時候接觸 bbs 後就很喜歡他有個人板的設定,當時邊緣人的我就默默成立一個後開始狂用 ANSI 做圖,我也因為玩得太兇出了名在大二就當了系站的站長。

當時幾乎每個科系都會有一個 bbs 站,每個大學也都會有一個最大的主站,每個大站也或多或少會有些不一樣的地方,我當時就去幾個比較知名的站例如台大 PTT2、不良牛、星月繁星、中央二進位和我們中央大氣風氣雲湧等上一一成立個人板,記得其實應該有十幾個站但也是年代久了忘得差不多了,有了個人板加上 bbs 可以設定轉信的功能,也就是你在一個站發會同步到其他的站去,我就每開一個板就都設定同步轉信,當時就很享受這種有很多個人阪的感覺(?),到後來去參加 PTT 的進站畫面設計比賽還拿了第一名後,我就漸漸不做 bbs 的圖了,加上畢業後當兵時 bbs 的漸漸沒落,這些個板大概也就消失在歷史的洪流裡了。

▼ 當年 PTT 進站畫面第一名的作品,當時中央的二進位還有風起雲湧也都用這個進站畫面,應該算是我在做 bbs 的圖最得意的事蹟了。
2005


退伍後開始工作,正好是部落格的黃金年代,我從無名小站開始,到後來也是類似 bbs 的年代一樣我在各大 BSP 平台都有成立部落格,其他包含 PIXNET、樂多、天空部落、Xuite、Blogger和 FC2 等都可以看到我成立的部落格的蹤跡,當時貼文的方式是一個站貼一個主題,比如在 Xuite 貼些喜歡的音樂,在天空部落貼機器人的資訊,在 PIXNET 貼籃球的戰術...等,後來歷經無名小站的關閉以及我開始會寫程式了,這些部落格也就漸漸荒廢掉了,當然部落格會沒落的主要原因還是因為 FB 的崛起啦,相信現在會寫部落格的人越來越少了,我還是有在持續寫比如這個紅色死神部落格,但更喜歡的就變成寫網站了。


▼ 無名小站時期做了不少 CSS 的樣式,這是當時最多人喜歡的一款,而在無名小站關閉後我也將內容備份到無名紅色死神後且不在做後續的更新了。
onepiece

先寫到這邊,下一篇應該就要來講我這幾年做的最開心的事情了。
Read more

2018年10月20日 星期六

[超級英雄圖譜] 幻影天使(Elektra)

Elektra

艾麗卡從小就在兄長俄瑞斯忒斯的教導下學習武術。而在父親遇害後,她為了追求更強的力量而離開美國,並輾轉加入了手合會。艾麗卡在那裏學到了忍術、各種武術與暗殺技巧,各式冷兵器的造詣更達到了大師的地步,而她主要使用的武器是出自琉球的雙釵。

艾麗卡的體能可以媲美奧運選手,在力氣、敏捷、速度與反應上都達到了人類的巔峰。

為了更好的完成自己的刺殺行動,艾麗卡特地學習過了催眠與反催眠的技巧,加上她本身也有些許的心靈感應能力,這使她的精神意志極為強大,不會輕易受制於他人的精神控制。
Read more

2018年10月19日 星期五

[Pokémon-Info] 依世代區分圖鑑



因為四代開放,想說把之前弄的圖鑑改漂亮一點,所以把各世代獨立出來也把寶可夢的圖片顯示出來就完成了各世代區分的頁面,之後應該會在上面補上各種寶可夢取得的方式讓大家方便查詢。

所以就以第四世代來當範例吧。
Read more

2018年10月18日 星期四

解決 chrome 用 img 標籤讀入 svg 無法顯示的問題

有人問我為什麼他把 svg 用 img 的標籤讀入後會看不到,試了一下發現 chrome 才有這現象,查了一下發現應該是用 illustrator 外部嵌入檔案時轉存 svg 沒有設定好的問題,在轉存的時候像這樣設定就沒問題了。



不過應該很少人會遇到這個問題吧 XD,svg 應該還是用純向量就好了,嵌入外部檔案感覺怪怪的。
Read more

2018年10月16日 星期二

2018年10月15日 星期一

2018年10月14日 星期日

2018年10月13日 星期六

2018年10月12日 星期五

2018年10月11日 星期四

[WordPress] 製作自己的佈景主題

WordPress 真的是一套很方便的架站工具,一般來說只要簡單的幾個步驟把網站架起來,再套個喜歡的樣版後和裝一些必要的 plugin 後就可以上線了,那如果有想要製作自己的樣版或依想要的方式安排頁面呢? 這時候就要研究一下 WP 的系統架構和原始碼囉。

首先要在 wp-content/themes 下建立一個新的資料夾,這個資料夾就會是你的佈景主題的名稱,並至少在裡面建立 index.php 及 style.css 兩個檔案。



建立好就會在佈景主題那邊看到你命名的佈景主題了,目前畫面還是空的。



接下來就要開始調整內容囉,首先切換到 外觀 > 主題編輯器,選擇你自訂的那個佈景主題。


現在還是空空的,我們可以先在 index.php 上加上 get_header(); 和 get_footer(); ,會先把 WP 預設的標題和頁尾抓進來。


系統會自動幫你抓在 WP 設定的網站名稱和敘述。



先講到這邊,其他下次繼續。
Read more

2018年10月10日 星期三

2018年10月9日 星期二

[WordPress] 取得頁面(Page)內容- get_post()

想要自己設計 Wordpress 樣板時,若要在網頁上取得某一個頁面(Page)的內容,可以使用 get_post()

要使用的話首先要知道想要取得頁面的 post id,這個 id 可以在網址頁上看到


接下來可以像這樣取得內容
  1. $page = get_post($postid);   
  2. echo apply_filters('the_content'$post->post_content);  

使用 get_post() 後會回傳一個 WP_Post 的物件,完整如下。
  1. WP_Post Object   
  2. (   
  3.     [ID] =>   
  4.     [post_author] =>   
  5.     [post_date] =>    
  6.     [post_date_gmt] =>    
  7.     [post_content] =>    
  8.     [post_title] =>    
  9.     [post_excerpt] =>    
  10.     [post_status] =>   
  11.     [comment_status] =>   
  12.     [ping_status] =>    
  13.     [post_password] =>    
  14.     [post_name] =>   
  15.     [to_ping] =>    
  16.     [pinged] =>    
  17.     [post_modified] =>    
  18.     [post_modified_gmt] =>   
  19.     [post_content_filtered] =>    
  20.     [post_parent] =>    
  21.     [guid] =>    
  22.     [menu_order] =>   
  23.     [post_type] =>   
  24.     [post_mime_type] =>    
  25.     [comment_count] =>   
  26.     [filter] =>   
  27. )  

也就是可以依據這個格式去獲取其他內容。
Read more
Related Posts Plugin for WordPress, Blogger...