2021-01-13

Hexo landscape 主題優化

介面改中文

在 _config.yml 調整語言從英文 default 改為繁體中文 zh-TW，

_config.yml

1
2
3

author: author
- language: default
+ language: zh-TW

有些翻譯不好或想改名稱的話可以到 themes/landscape/languages/zh-TW.yml 檔案直接修改成你想要的名字，zh-TW.yml 內容長這樣

themes/landscape/languages/zh-TW.yml

categories: 分類
search: 搜尋
tags: 標籤
tagcloud: 標籤雲
tweets: 推文
prev: 上一頁
next: 下一頁
comment: 留言
archive_a: 彙整
archive_b: 彙整：%s
page: 第 %d 頁
recent_posts: 最新文章
newer: Newer
older: Older
share: Share
powered_by: Powered by
rss_feed: RSS Feed
category: Category
tag: Tag

修改字體

Next 主題內建使用微軟雅黑體，但根據請不要用微軟雅黑體來顯示台灣區的繁體字這篇的經驗，台灣區改用微軟正黑體比較正確，

在 themes/landscape/source/css/_variables.styl 的 font-sans 加上 "微軟正黑體"

themes/landscape/source/css/_variables.styl

// Fonts
-font-sans = -apple-system, BlinkMacSystemFont,
-    "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell",
-    "Fira Sans", "Droid Sans", "Helvetica Neue",
-    sans-serif
+font-sans = -apple-system, BlinkMacSystemFont, "Noto Sans TC", "微軟正黑體",
+    "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell",
+    "Fira Sans", "Droid Sans", "Helvetica Neue",
+    sans-serif

當使用者的作業系統沒有第一個字體的時候，就會依照順位來找尋第二個字體…以此類推，所以這些擺放位置不是隨意擺放的，要有優先順序的放，通常會將英文字體在最前面順位、接著是MAC字體、Windows字體，原因是中文字體通常有包含英文字體，所以中文字體放前面的話，英文字就會優先採用中文字體，不會往後找你設定的英文字體了

Segoe：是一款西文無襯線體，是由微軟公司開發的並且廣泛使用的字型
Roboto：2011年後，隨著 Android 4.0 的發布，Android 預設字體改成 Roboto 系列
Droid：2011年前都是Android系統的標準字體
Helvetica：是一種廣泛使用於拉丁字母的無襯線字體
Noto Sans TC：黑體字體–思源黑體(繁體中文)
Microsoft JhengHei：微軟正黑體
Microsoft YaHei：微軟雅黑體

修改字體大小

themes/landscape/source/css/_variables.styl

1 2	-font-size = 14px +font-size = 16px

Hexo 預設的 landscape 主題的側邊欄有「分類」、「標籤」、「標籤雲」、「封存文章」、「最新文章」這幾個，要關閉某一個 widget 的話需要到 theme/_config 裡的 widgets 做調整

像這樣就是關閉標籤雲，

themes/landscape/_config.yml

# Sidebar
sidebar: right
widgets:
- category
- tag
# - tagcloud
- archive
- recent_posts

側邊欄調整最新文章的顯示數量

在以前舊版的 landscape 預設是顯示5個，直到後來才有人把這參數獨立出來放在主題的 _config.yml 下給人調整，

以舊版為例，直接去 themes/landscape/layout/_widget/recent_posts.ejs 路徑把最新文章增加到10

themes/landscape/layout/_widget/recent_posts.ejs

1 2	- <% site.posts.sort('date', -1).limit(5).each(function(post){ %> + <% site.posts.sort('date', -1).limit(10).each(function(post){ %>

以新版為例，直接在修改主題的 _config.yml 裡調整就好

themes/landscape/_config.yml

1
2
3

show_count: false
-recent_posts_limits: 5
+recent_posts_limits: 10

新增 about 頁面

輸入下列指令新增 about 頁面，會產生 source/about/index.md

1	hexo new page about

這時預覽可以發現會產生新的頁面在 xxx/about/
因此類推，你輸入 hexo new page “hello” 會產生 source/hello/index.md 然後會有新頁面出現在 xxx/hello/
跟新增文章的指令不同唷，新增文章是 hexo new post “hello” 產生 source/_posts/hello.md，別搞混了~~~

新增標籤 tags 頁面

輸入下列指令新增標籤頁面，會產生 source/tags/index.md

1	hexo new page tags

index.md 的 layout 修改成 tags，預設不填 layout 帶入 page 這個參數，

index.md

---
title: tags
date: 2021-01-31 22:00:00
layout: tags
comments: false
---

原本的 layout: page 會在 layout.ejs 的 <%- body %> 套入 article.ejs，
改成 layout: tags 後就會在 layout.ejs 的 <%- body %> 套入 tags.ejs，所以我們要來新增 tags.ejs 自訂我們的顯示方式，tags.ejs 內容如下，

tags.ejs

<article id="post" class="article article-type-post" itemscope itemprop="blogPost">
  <div class="article-inner">
      <header class="article-header">
        <h1 class="article-title" itemprop="name"><%= __('tags') %></h1>
      </header>
    <div class="article-entry" itemprop="articleBody">
      <% if (site.tags.length){ %>
        <%- list_tags({show_count: theme.show_count}) %>
      <% } %>
    </div>
  </div>
</article>

ShengYu Talk