2017-06-21 |

Hexo 摘要節錄插件 - Hexo-Excerpt-Block

hexo 插件 - hexo-excerpt-block

🔸簡介

當你使用 hexo 架站時,是否曾經被內建的摘要標示困擾呢?這裡介紹兩款插件來幫你簡單標記摘要。

🔸1. 內建作法

前幾日因為看到部落格首頁,每篇底下都是「No Post Excerpt」看了也是頗空虛, 所以稍微研究了一下 hexo 的摘要,發現內建的摘要是在文章中插入<!-- more -->, 在這個標籤之前的內容都將被視為「文章摘要」。

1
2
3
4
5
6
7
8
9
10
11
---
title: hexo 摘要節錄插件 - hexo-excerpt-block
tags: 專案介紹
---
![封面](cover.png)
## hexo 插件 - hexo-excerpt-block
前幾日因為看到部落格首頁,每篇底下都是「No Post Excerpt」看了也是頗空虛。
<!-- more -->
內容

摘要判定 (會被 render 過):

1
2
3
![封面](cover.png)
## hexo 插件 - hexo-excerpt-block
前幾日因為看到部落格首頁,每篇底下都是「No Post Excerpt」看了也是頗空虛。

內容判定:

1
2
3
4
5
![封面](cover.png)
## hexo 插件 - hexo-excerpt-block
前幾日因為看到部落格首頁,每篇底下都是「No Post Excerpt」看了也是頗空虛。
內容

但是這個內建的作法沒什麼彈性,萬一你想要的摘要段落位於文章中間,或是開頭有個大大的封面圖片, 用這個方法將會導致摘要會包含前頭不重要的部分,或是也包含大大的封面。

🔸2. hexo-less

所以為了解決這個問題,我在 npm 上搜尋了一下,找到了一款很不錯的套件「hexo-less」, 這能夠在文章前頭加上一塊「獨立」的文章摘要,與內建的方法相同,插入<!-- less -->, 在標籤前的摘要也將不會作為文章「內容」, 用法與內建作法一樣,只是呈現的方式有異。

1
2
3
4
5
6
7
8
9
10
11
12
13
---
title: hexo 摘要節錄插件 - hexo-excerpt-block
tags: 專案介紹
---
這是一篇超級棒的文章!
<!-- less -->
![封面](cover.png)
## hexo 插件 - hexo-excerpt-block
前幾日因為看到部落格首頁,每篇底下都是「No Post Excerpt」看了也是頗空虛。
內容

摘要判定:

1
這是一篇超級棒的文章!

內容判定:

1
2
3
4
5
![封面](cover.png)
## hexo 插件 - hexo-excerpt-block
前幾日因為看到部落格首頁,每篇底下都是「No Post Excerpt」看了也是頗空虛。
內容

這款套件可以簡單的做到「自定義」一塊獨立的摘要內容,適合在你想要引人入勝、聳到的摘要時, 但卻不想在文章用一樣浮誇的內容,不過當你只是想要標記文章中的某一段作為摘要呢?

🔸3. hexo-excerpt-block

俗話說得好,老王賣瓜,其實這是我從上面那款插件修改來的呵呵。這其實算是內建摘要標記的加強版, 只要用兩個 <!-- block --> 包起來,中間的部分就會被視為摘要。

1
2
3
4
5
6
7
8
9
10
11
---
title: hexo 摘要節錄插件 - hexo-excerpt-block
tags: 專案介紹
---
![封面](cover.png)
## hexo 插件 - hexo-excerpt-block
<!-- block -->
前幾日因為看到部落格首頁,每篇底下都是「No Post Excerpt」看了也是頗空虛。
<!-- block -->
內容

摘要判定:

1
前幾日因為看到部落格首頁,每篇底下都是「No Post Excerpt」看了也是頗空虛。

內容判定:

1
2
3
4
5
![封面](cover.png)
## hexo 插件 - hexo-excerpt-block
前幾日因為看到部落格首頁,每篇底下都是「No Post Excerpt」看了也是頗空虛。
內容

<!-- block -->之間的內容將會被保留視為內容,也同時被視為摘要,你可以視為摘要區塊, 安裝方法也很簡單,npm i hexo-excerpt-block --save就可以了,hexo 會自動引用。

2017-04-11 |

「自架」經典雲端IDE - Cloud9

自己的雲端IDE自己架

【「自架」經典雲端IDE - Cloud9】


封面

Cloud9 擁有強大的語言支援,重點是還內建終端介面,讓你能夠立刻調適你的 code,不僅如此還擁有 debugger,在編輯器內設定中斷點,直接在 IDE 中 dubug。

我自己在外面也會使用它來 coding,因為自己常常會跑咖啡館或是在戶外打發時間,而且自己有不同機器,需要一個能解決異地檔案同步的方法,那不如把專案統一在雲端,自己辦個便宜的吃到飽(288),這樣就能完全解決問題了。 (笑)

當然你也可以直接使用 Cloud9 公司提供的平台,不過它相依於你專案的 Git,使用平台必須擁有 git 才能建立專案,還好 c9 是個開源專案(笑again),讓我們能夠自己架設在自己的機器上。

簡介可以參考別人的文章維基

🔸使用需求

  1. 有多部開發機器,想解決檔案異地同步問題
  2. 常常趴趴走

🔸自己架 c9 的優勢

  1. 檔案放自己家裡,你放心我放心
  2. 可以直接編輯自己主機內的文件
  3. 方便在網頁中操作自己主機的終端

🔸架設方式

Cloud9 是個開源專案,所以我們可以直接下載下來直接使用。

1
2
3
git clone git://github.com/c9/core.git c9sdk # 下載專案
cd c9sdk # 進入專案目錄
scripts/install-sdk.sh # 讓他跑些安裝

開啟步驟也很簡單

1
node server.js

Cloud9也有許多參數可以調適

1
2
3
4
5
6
7
8
9
10
11
12
13
14
--settings 指定設定檔
--help 顯示可以使用的指令
-t 使用測試模式開啟
-k Kill tmux server in test mode
-b Start the bridge server - to receive commands from the cli [default: false]
-w 工作目錄
--port Port
--debug 開啟 dubugging
--listen 這個 server 的 IP 位址
--readonly 以唯讀模式開啟
--packed Whether to use the packed version.
--auth 基本授權方式,也就是設定帳號密碼,格式是 username:password
--collab Whether to enable collab.
--no-cache Don't use the cached version of CSS

啟動後直接在瀏覽器開啟 http://localhost:8181,當然也可以打開防火牆的 port,讓我們可以在外地遠端使用。

🔸加上 SSL 憑證

這部分官方沒有在文件中提及,但可以在 issue 中找到方法。

在 c9 目錄中,找到 configs/standalone.js,在 plugins 陣列中,找到有 packagePath: "connect-architect/connect" 這個欄位的物件,然後在這個物件中加上

1
2
3
4
5
secure: {
// 放上憑證
key: require("fs").readFileSync('/path/to/key.pem'),
cert: require("fs").readFileSync('/path/to/cert.pem')
}

重新啟動 c9 後,您的 c9 IDE 網址就會從 http 改成 https 囉。

🔸搭配 pm2

因為我自己使用 pm2 作伺服器管理,所以稍微介紹一下方法

在 c9 目錄底下建立 ecosystem.config.js 文件,內容放上

1
2
3
4
5
6
7
8
9
module.exports = {
apps : [
{
name : "c9",
script : "server.js",
args : "-l <IP 位址> -a <帳號>:<密碼> -w <工作目錄>"
}
]
}

以後就直接在 c9 目錄底下下「pm2 start ecosystem.config.js」就OK了。

🔸加上 wakaTime - coding time 的紀錄工具

wakatime 也有支援 cloud9 喔

Get In Touch

Us a service like Google forms or formspree to modify this partial in _partials/contact-form.

  • Address

    1234 Somewhere Rd.
    Nashville, TN 00000
    United States
  • Phone

    000-000-0000
  • Email

    [email protected]