Pelican 近端與遠端的設定.

基本的概念是, 在近端時, 靜態網頁使用相對目錄, SITEURL 設為 "./", 而在 Github pages 時, 則採用制式的符號名稱加上 repository 名稱作為 SITEURL.

另外一個近端與遠端的差異為 Tipue search, 近端時, 利用 static 模組, 將所有網頁內容存為 tipuesearch_content.js, 而在 Github pages 時, 則使用 json 模組, 網頁內容存為 tipuesearch_content.json 格式.

其中為了在網誌內容編寫與功能開發過程中, 能夠完全在近端測試 Github pages 端的所有功能, 利用 Leo Editor 的 @buttton 與 @edit, 分別針對兩端所需要的不同設定加以區分, 就連 theme 中有關 Tipue search 的啟動與設定, 也是分為近端與遠端兩套.

在 kmolsite 的專案中, 我們可以發現, Leo Editor 在面對這些不同環境, 不同設定, 而必須以不同指令產生不同內容的情況下, 可以說應付自如.

網誌存檔與呼叫設定

近端的設定, 主要在於瀏覽器無法自行開啟 index.html, 因此 ARTICLE_URL 直接指到 index.html

# 改為依照日期存檔呼叫
ARTICLE_URL = 'posts/{date:%Y}/{date:%m}/{date:%d}/{slug}/index.html'
ARTICLE_SAVE_AS = 'posts/{date:%Y}/{date:%m}/{date:%d}/{slug}/index.html'
PAGE_URL = 'pages/{slug}/'
PAGE_SAVE_AS = 'pages/{slug}/index.html'

而在 gh-pages 端的設定, 因為會直接開啟各網誌文章目錄中的 index.html, 因此 ARTICLE_URL 只要設到文章目錄即可.

# 改為依照日期存檔呼叫
ARTICLE_URL = 'posts/{date:%Y}/{date:%m}/{date:%d}/{slug}/'
ARTICLE_SAVE_AS = 'posts/{date:%Y}/{date:%m}/{date:%d}/{slug}/index.html'
PAGE_URL = 'pages/{slug}/'
PAGE_SAVE_AS = 'pages/{slug}/index.html'

codehilite 設定

首先是 Pelican 的設定檔案:

1 2	# 近端與遠端的 code hightlight MD_EXTENSIONS = ['fenced_code', 'extra', 'codehilite(linenums=True)']

接著則是在所選擇的 Pygment css 設定檔案最後面, 加上以下格式設定碼:

/* For codehilite */
.codehilitetable, .linenos {
    background: #2d2d2d;
    color: #f2f0ec;
}

.codehilitetable {
    font: 12px/20px "Source Code Pro",monospace;
    overflow-x: auto;
    display: block;
    border-left: 3px solid #FF8000;
    border-radius: 2px;
    padding: .8em 0;
}

.codehilitetable tbody tr {
    display: block;
}

.codehilitetable pre {
    display: block;
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
    background-color: inherit;
    line-height: inherit;
    color: inherit;
    word-break: initial;
    word-wrap: initial;
}

.c, .linenos {
    color: #747369;
}

.codehilitetable, .linenos {
    background: #2d2d2d;
    color: #f2f0ec;
}

.linenos {
    border-right: 1px solid #3d3d3d;
    padding-right: 0.7em;
    margin-right: 0.7em;
    width: 3em;
    text-align: right;
    position: absolute;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.codehilite {
    margin: 0 1em 0 3.5em;
}


.c, .linenos {
    color: #747369;
}
.err {
    color: #f2777a;
}
.k {
    color: #c9c;
}
.l {
    color: #f99157;
}
.n {
    color: #f2f0ec;
}
.o {
    color: #6cc;
}
.p {
    color: #f2f0ec;
}
.cm {
    color: #747369;
}
.cp {
    color: #747369;
}
.c1 {
    color: #747369;
}
.cs {
    color: #747369;
}
.gd {
    color: #f2777a;
}
.ge {
    font-style: italic;
}
.gh {
    color: #f2f0ec;
    font-weight: bold;
}
.gi {
    color: #9c9;
}
.gp {
    color: #747369;
    font-weight: bold;
}
.gs {
    font-weight: bold;
}
.gu {
    color: #6cc;
    font-weight: bold;
}
.kc {
    color: #c9c;
}
.kd {
    color: #c9c;
}
.kn {
    color: #6cc;
}
.kp {
    color: #c9c;
}
.kr {
    color: #c9c;
}
.kt {
    color: #fc6;
}
.ld {
    color: #9c9;
}
.m {
    color: #f99157;
}
.s {
    color: #9c9;
}
.na {
    color: #69c;
}
.nb {
    color: #f2f0ec;
}
.nc {
    color: #fc6;
}
.no {
    color: #f2777a;
}
.nd {
    color: #6cc;
}
.ni {
    color: #f2f0ec;
}
.ne {
    color: #f2777a;
}
.nf {
    color: #69c;
}
.nl {
    color: #f2f0ec;
}
.nn {
    color: #fc6;
}
.nx {
    color: #69c;
}
.py {
    color: #f2f0ec;
}
.nt {
    color: #6cc;
}
.nv {
    color: #f2777a;
}
.ow {
    color: #6cc;
}
.w {
    color: #f2f0ec;
}
.mf {
    color: #f99157;
}
.mh {
    color: #f99157;
}
.mi {
    color: #f99157;
}
.mo {
    color: #f99157;
}
.sb {
    color: #9c9;
}
.sc {
    color: #f2f0ec;
}
.sd {
    color: #747369;
}
.s2 {
    color: #9c9;
}
.se {
    color: #f99157;
}
.sh {
    color: #9c9;
}
.si {
    color: #f99157;
}
.sx {
    color: #9c9;
}
.sr {
    color: #9c9;
}
.s1 {
    color: #9c9;
}
.ss {
    color: #9c9;
}
.bp {
    color: #f2f0ec;
}
.vc {
    color: #f2777a;
}
.vg {
    color: #f2777a;
}
.vi {
    color: #f2777a;
}
.il {
    color: #f99157;
}

網誌存檔與呼叫設定

codehilite 設定

Comments