Hexo 預設 template 頁面切換按鈕問題

最近開始在使用 Hexo 來寫部落格文章,這是一個 blog framework,使用起來很方便。只要透過 Markdown 語法就可以做出常用的基本排版了,之後再寫篇介紹的文章囉!

今天遇到了一個問題,Hexo 的預設佈景主題 landscape 文章列表的頁面切換按鈕顯示異常。看到覺得奇怪,難道這是什麼神奇的格式嗎?

按鈕文字應該是要顯示下一頁才對吧?

經過抽絲剝繭的調查,原來是預設的佈景主題在頁面切換的按鈕語法似乎寫錯了。
下面是 template 中 archive.ejs 的檔案其中一部分的內容,主要就是 page-nav 的部分有誤。

1
2
3
4
5
6
7
8
<% if (page.total > 1){ %>
<nav id="page-nav">
<%- paginator({
prev_text: "&laquo; +__('prev')",
next_text: "__('next')+ &raquo;"
}) %>
</nav>
<% } %>

將上方的 prev_textnext_text 後面的內容修改一下,引號的位置錯囉…

1
2
prev_text: "&laquo; "+__('prev'),
next_text: __('next')+" &raquo;"

這樣就可以正常顯示囉 XD

這才是正確的按鈕文字的顯示

VS Code 檔案顯示設定

開始寫 Typescript 之後…

編譯後的檔案都會出現在同一個地方,導致每次點選檔案的時候都要留一下自己點到的到底是 ts 還是 js 很不方面。因此開始尋找是否有辦法可以隱藏 Typescript 編譯後的檔案,畢竟我們很少會去看編譯後的檔案,除了一開始學習 typescript 時,會觀察一下編譯前後的變化…但,到後面還是覺得隱藏起來比較方便!

重複顯示的檔名使人眼花

Read More

Http status 狀態筆記

HTTP Status 狀態代表的意思

網頁接收到伺服器的回應後,都會自動去判讀網頁的狀態,其中的 Http Status代碼的意思如下:

- 200 伺服器回應Data成功。
- 206 取得片段資料,Http Request 中有的 Range 屬性,可以指定要取得那一段Bytes數。
- 301 目標網頁移到新網址(永久轉址)。
- 302 暫時轉址
- 304 已讀取過的圖片或網頁,由瀏覽器緩存 (cache) 中讀取。
- 401 需身分驗證,如 SSL key or htaccess pasword。
- 403 沒有權限讀取,可能是 IP 被阻檔或是伺服器限制。
- 404 伺服器未找到目標網址,檔案不存在。
- 408 Client Request timeout
- 411 沒有指定 content-length,使用 POST 傳送參數時,必須指定參數的總長度
- 414 URL 太長導致伺服器拒絕處理。
- 500 伺服器發生錯誤 : 可能是 htaccess 有錯
- 503 伺服器當掉 : maybe is code dump
- 505 不支此 HTTP 版本

資料來源: Http status 狀態 404 304

Sass筆記「@mixin」介紹:節省重複撰寫CSS樣式的時間

撰寫CSS的時候,時常會遇到一種情況:

在開發多種CSS樣式時,會將第一次寫的程式碼複製貼上後,再進行修改,

日後樣式需要整個大修時(例:圓形改方形),又必須將所有CSS重新逐一修正,非常不方便。

使用 Sass @mixin 的話,上述的問題可輕鬆解決,同時還可傳入多個變數進去。

我們先來看下面的code:

Read More

Sass筆記「@extend」介紹:無痛合併CSS樣式

在撰寫CSS過程中,為了避免CSS太龐大,當我們有用到相同的樣式時,

都會將它合併起來如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
/* 第200行位置 */ 
.header h1, .content h1, .footer h1 {
font-size: 20px;
line-height: 1.8;
letter-spacing: 1px;
}
/* 第400行位置 */
.header h1 {
color: black;
}
/* 第1000行位置 */
.content h1 {
color: green;
}
/* 第N000行位置 */
.footer {
color: pink;
}

但這樣子會有個麻煩的地方是,假設合併樣式程式碼的位置在第200行,而我目前位置是在N千多行。

當需要合併樣式時,又必須回到第200行來合併class樣式,所以當程式碼越變越多時,

要集中相同樣式的工作流程相對也會變得更加繁瑣。

因此Sass @extend 繼承的方式可以解決這樣的問題。

Read More

Sass版本與Compass版本的相依問題

今天想嘗試 Sass framework ,Bourbon !!

但是在編譯的過程中遇到了一些問題,就是 sass 已經更新到3.3版了,compass 仍然使用3.2版,於是上網四處找資料。

在經過苦痛的google搜尋之後,才發現原來 compass 有對應的 sass 版本相依,由於沒有裝 compass 相關 app,

所以不清楚是不是可以直接在哪邊做sass版本的修改。

Read More

Sass環境建置紀錄

最近開始練習 Compass + Sass 的練習,記錄一下如何在 Windows 系統下建置 Sass 開發環境。

首先,安裝 Ruby

Sass 與 Compass 是用 ruby 開發的,在 windows 的環境下,

就必須先到他的官網安裝最新的 ruby,http://rubyinstaller.org/downloads/

接著安裝Sass、compass

在開始工作列程式搜尋欄位輸入「CMD」後開啟「命令提示字元」,輸入以下指令後按ENTER。

1
gem install compass

compass 安裝完成之後接著安裝 sass

Read More