Pi's Blog
0%

發表於 更新於

從第二行開始縮排有個專有名詞，叫做 hanging indent，這篇文章會說明如何做到這點。

CSS 的 text-indent 屬性

這個屬性是控制文字的縮排，語法如下：

1
2
3
text-indent: [縮排距離] [縮排模式] 
如：
text-indent: 30px hanging;
  • 縮排距離： 如10px、2em、-30px 等等
  • 縮排模式：
    1. hanging: 反過來，除了第一行以外都會縮進去。
    2. each-line: 第一行會縮排，以及每個用<br>換行後的第一行也會縮排

不過縮排模式好像還在實驗階段，我目前還沒成功使用過，每次都沒作用XD

替代方案

如我剛剛所說，打上 hanging 不會有任何效果，但是我們還是可以硬把它做成成’看起來’有 hanging 的樣子。
只要同時設定padding-left和負的text-indent就可以了：

1
2
padding-left: 2em;
text-indent: -2em;

 

React Native 的縮排

1
<Text>{'\t'}{'\t'}Something you want to say</Text>

 

React Native 從第二行開始縮排

我還沒找到方法 XD

發表於 更新於

 

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