Pi's Blog
0%

發表於 更新於

 

Outline

  1. 圖片的插入方式
  2. 解決本地圖片無法顯示的問題
     

圖片的插入方式

在 markdown 的語法中，可以下列兩種方式插入圖片：

  • ![圖片的替代文字](圖片網址 or 本地圖片路徑)
    例如：![我的自拍照](www.ooxxooxx.jpg)
               ![我的自拍照](./img/picture1.jpg)

  • 用 HTML 語法
    例如：<img src="www.ooxxooxx.jpg">
     

解決本地圖片無法顯示的問題

但剛剛測試發現明明圖片確實存在於我的路徑，可是網頁中就是顯示不出來。稍微搜尋一下才知道這好像是hexo普遍的問題，需要安裝一個圖片路徑轉換的外掛:

1
npm i https://github.com/CodeFalling/hexo-asset-image --save

基本上這樣就 ok 了，但為了避免出現 bug，我們需要修改某個檔案。
開啟 /node_modules/hexo-asset-image/index.js，並用以下的程式碼取代內容：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
'use strict';
var cheerio = require('cheerio');

// http://stackoverflow.com/questions/14480345/how-to-get-the-nth-occurrence-in-a-string
function getPosition(str, m, i) {
  return str.split(m, i).join(m).length;
}

var version = String(hexo.version).split('.');
hexo.extend.filter.register('after_post_render', function(data){
  var config = hexo.config;
  if(config.post_asset_folder){
    	var link = data.permalink;
	if(version.length > 0 && Number(version[0]) == 3)
	   var beginPos = getPosition(link, '/', 1) + 1;
	else
	   var beginPos = getPosition(link, '/', 3) + 1;
	// In hexo 3.1.1, the permalink of "about" page is like ".../about/index.html".
	var endPos = link.lastIndexOf('/') + 1;
    link = link.substring(beginPos, endPos);

    var toprocess = ['excerpt', 'more', 'content'];
    for(var i = 0; i < toprocess.length; i++){
      var key = toprocess[i];
 
      var $ = cheerio.load(data[key], {
        ignoreWhitespace: false,
        xmlMode: false,
        lowerCaseTags: false,
        decodeEntities: false
      });

      $('img').each(function(){
		if ($(this).attr('src')){
			// For windows style path, we replace '\' to '/'.
			var src = $(this).attr('src').replace('\\', '/');
			if(!/http[s]*.*|\/\/.*/.test(src) &&
			   !/^\s*\//.test(src)) {
			  // For "about" page, the first part of "src" can't be removed.
			  // In addition, to support multi-level local directory.
			  var linkArray = link.split('/').filter(function(elem){
				return elem != '';
			  });
			  var srcArray = src.split('/').filter(function(elem){
				return elem != '' && elem != '.';
			  });
			  if(srcArray.length > 1)
				srcArray.shift();
			  src = srcArray.join('/');
			  $(this).attr('src', config.root + link + src);
			  console.info&&console.info("update link as:-->"+config.root + link + src);
			}
		}else{
			console.info&&console.info("no src attr, skipped...");
			console.info&&console.info($(this));
		}
      });
      data[key] = $.html();
    }
  }
});

大功告成！

發表於 更新於

 

Outline

  1. 創建 github 帳號，並取得網域名稱
  2. 安裝 hexo
  3. 執行 hexo 建立部落格

1. 創建 github 帳號，並取得網域名稱

首先到 github 官網註冊帳號，完成後登入
接著點擊總上繳的 new 來新增一個 repository

然後在 repository name 的地方輸入 你的帳號名.github.io 。注意這是唯一的名字，打任何其他的都不對。是說我也不知道會有什麼問題，可能跟是不是根目錄有關吧。
可以參考下圖 (我已經建立過了所以有錯誤訊息)

完成後你就獲得一個網域了！ 我們待會再回來這做設定。

2. 安裝 hexo

Hexo 的安裝很簡單，前置作業反而還比較麻煩，不過也不難，你必須要先安裝以下的軟體：

  • Node.js
  • Git
    於是便能在 Terminal 藉由以下指令安裝 hexo：
1
npm install -g hexo-cli

其中 -g 代表 global，如此一來無論你是在哪裡執行這個指令，整台電腦都能使用 hexo 囉~

接著我們要生成部落格的檔案惹！
在 terminal 中進入到你打算建立部落格資料夾的路徑，輸入以下指令：

1
2
3
$ hexo init <folder>  #初始化, 會建立一個資料夾
$ cd <folder>  #進到那個資料夾
$ npm install  #開始安裝

完成後，進到該 repository

發表於 更新於

前言

前幾天是大學學測，去年就去支援監考的我當然今年也是要去囉！雖然錢是好賺啦，但真的太煎熬了！！！下面那些學生還有考卷可以寫，而我們這些監考的要坐著發呆100分鐘(還不能被看出在發呆QQ)。

於是我利用了這段超級無聊的時間構思自己的未來規劃，開始寫部落格就是其中一點。
我覺得必須記錄一些學習筆記，不管是為了我自己，或是來到這裡的任何人。

平台的選擇

其實最最一開始我是打算用痞客邦那種部落格就好了，技術部份縮到最少，專心在內容即可。但仔細想想覺得那好像是很久以前的產物了，有種在過原始生活的感覺XD 而且總覺得找個比較有門面的平台還是比較好，於是我接受女友的建議到 Medium 試著寫寫看，沒想到一試才發現：也太難用了吧！！！

但我的意思不是 Medium 是個很爛的地方，而是

Medium 超級難紀錄跟程式相關的資訊 哭啊

首先它沒有程式區塊，這點是致命傷。再來它對字型的限制非常多，字體大小選擇很少，顏色也不能改，除了截圖以外我真的不知道怎麼展現我的程式碼… 於是我再次踏上尋找平台的旅途((明明也沒找多久

最終終於決定了 Github Page + Hexo 的這個模式。我看重的是他的幾個優點：

  1. Github 免費提供網域：
    免費網域誰不愛，最大的限制就是只能做”靜態網頁””。
  2. Github 是超大社群：
    各路專家都在那上面，活動率很高，99999成的機率不會關站。
  3. Hexo 的方便性：
    基本上，雖然我想學，但我並不會想要在部落格上從零開始學架站，Hexo在幫我建立起Blog的基本樣貌，使我跳過最前端的艱困時光的同時，在擴充性上也給了我極大的自由，未來等到我熟練了，便能對這個網站的任何角落做修改。

目前遇到的困難：

  1. 網站架構看不懂：
    Hexo幫我製作的一系列檔案，雖然能直接幫我生成網站，但我實在不知道怎麼面對這個結構😅，好陌生。看來在我真正能開始客製網站前還有很多路要走。
  2. 教學資源少：
    我有去 Hexo 的官網看了一下教學，雖然都是中文啦，但我覺得相對於我以前自學的所有東西，Hexo 的 documentation 還蠻不知道在說什麼的XDD 但也有可能是我的問題。不過 Youtube 上的教學影片就真的蠻少的了。
  3. Markdown 語法還不熟：
    從這次接觸到我才知道原來 markdown 是一種語法！我以前一直以為他可能只是一個跟 note 很像的英文單字而已XDD 雖然看起來這個語法不難啦，但就是還需要熟悉一下。(這篇文章就是一個小嘗試)

目標

這個部落格只有一個目標，就是不要讓我無所事事。所以我會盡量讓自己每個禮拜都上來更新一下內容。
大部分這上面的文章都會是我在自學程式的過程中的小筆記，或是遇到error的解決辦法，希望至少每天都能進步一點點。