概述

想要在Hexo的Next主题中使用Google字体，一个问题在于这个字体的加载并不是很方便（与Next主题本身无关）。

解决的方法可以是修改主题，在没有合适CDN的情况下，从服务器直接加载对应字体也是一种选择。

实现

准备字体

首先，通过Chrome开发者工具，会发现难以加载的是这一css文件以及相关联的字体：

https://fonts.googleapis.com/css?family=Lato:300,400,700,400italic&subset=latin,latin-ext

1 2	https://fonts.googleapis.com/css?family=Lato:300,400,700,400italic&subset=latin,latin-ext

当前使用的Next主题使用的是Lato这一个字体，那么应该如何得到这一字体呢？

这时候就需要Google WebFont Downloader了。

如果有Node环境，那么直接执行:

npm install -g goog-webfont-dl

1 2	npm install -g goog-webfont-dl

即可。

使用上，可以通过-h查看参数定义：

→ goog-webfont-dl -h

  Usage: goog-webfont-dl [options] <fontname>

  Options:

    -h, --help                     output usage information
    -V, --version                  output the version number
    -t, --ttf                      Download TTF format
    -e, --eot                      Download EOT format
    -w, --woff                     Download WOFF format
    -W, --woff2                    Download WOFF2 format
    -s, --svg                      Download SVG format
    -a, --all                      Download all formats
    -f, --font [name]              Name of font
    -d, --destination [directory]  Save font in directory
    -o, --out [name]               CSS output file [use - for stdout]
    -p, --prefix [prefix]          Prefix to use in CSS output
    -u, --subset [string]          Subset string [e.g. latin,cyrillic]
    -y, --styles [string]          Style string [e.g. 300,400,300italic,400italic]
    -P, --proxy [string]           Proxy url [e.g. http://www.myproxy.com/]
    -q, --quiet                    Do not print status information

→ goog-webfont-dl -h

Usage: goog-webfont-dl [options] <fontname>

Options:

-h, --help output usage information

-V, --version output the version number

-t, --ttf Download TTF format

-e, --eot Download EOT format

-w, --woff Download WOFF format

-W, --woff2 Download WOFF2 format

-s, --svg Download SVG format

-a, --all Download all formats

-f, --font [name] Name of font

-d, --destination [directory] Save font in directory

-o, --out [name] CSS output file [use - for stdout]

-p, --prefix [prefix] Prefix to use in CSS output

-u, --subset [string] Subset string [e.g. latin,cyrillic]

-y, --styles [string] Style string [e.g. 300,400,300italic,400italic]

-P, --proxy [string] Proxy url [e.g. http://www.myproxy.com/]

-q, --quiet Do not print status information

通过上面的url，可以确定使用的的字体为Lato，那么下载相同的字体需要指定的参数为：

goog-webfont-dl -f "Lato" -y "300,400,700,400italic" -u "latin,latin-ext" -a

1 2	goog-webfont-dl -f "Lato" -y "300,400,700,400italic" -u "latin,latin-ext" -a

这里-a参数保证下载了所有字体。

如果可以顺利的访问对应的资源，那么成功之后将会在当前目录出现字体名为名字的css以及字体目录。

修改主题

对应的域名是googleapis，可以考虑在Next主题的vendors目录下新增一个同名的目录，将css以及字体组织。目录层级会变为：

→ tree themes/next/source/vendors
themes/next/source/vendors
├── fancybox
    ...
├── fastclick
    ...
├── font-awesome
    ...
├── googleapis
│   ├── css
│   │   └── Lato.css
│   └── fonts
│       └── Lato
│           ├── Lato-Bold.ttf
│           ├── Lato-Bold.woff
│           ├── Lato-Bold.woff2
│           ├── Lato-Italic.ttf
│           ├── Lato-Italic.woff
│           ├── Lato-Italic.woff2
│           ├── Lato-Light.ttf
│           ├── Lato-Light.woff
│           ├── Lato-Light.woff2
│           ├── Lato-Regular.eot
│           ├── Lato-Regular.svg
│           ├── Lato-Regular.ttf
│           ├── Lato-Regular.woff
│           └── Lato-Regular.woff2
├── jquery
    ...
├── jquery_lazyload
    ...
└── velocity
    ...

→ tree themes/next/source/vendors

themes/next/source/vendors

├── fancybox

...

├── fastclick

...

├── font-awesome

...

├── googleapis

│ ├── css

│ │ └── Lato.css

│ └── fonts

│ └── Lato

│ ├── Lato-Bold.ttf

│ ├── Lato-Bold.woff

│ ├── Lato-Bold.woff2

│ ├── Lato-Italic.ttf

│ ├── Lato-Italic.woff

│ ├── Lato-Italic.woff2

│ ├── Lato-Light.ttf

│ ├── Lato-Light.woff

│ ├── Lato-Light.woff2

│ ├── Lato-Regular.eot

│ ├── Lato-Regular.svg

│ ├── Lato-Regular.ttf

│ ├── Lato-Regular.woff

│ └── Lato-Regular.woff2

├── jquery

...

├── jquery_lazyload

...

└── velocity

...

剩下的工作是，在加载原先的css的partials中将url改成加载verdors中对应的地址即可：

{% if theme.use_font_lato %}
  <!--<link href="//fonts.googleapis.com/css?family=Lato:300,400,700,400italic&subset=latin,latin-ext" rel="stylesheet" type="text/css">-->
  <link href="{{ url_for(theme.vendors) }}/googleapis/css/Lato.css" rel="stylesheet" type="text/css">
{% endif %}

{% if theme.use_font_lato %}

{% endif %}

当然，如果不想这么麻烦，直接在主题设置中关闭Lato字体即可。

起因

用Pelican在GitHub上搭blog有段时间了，一直想要更清爽简单的blog解决方案，之前使用的Pelican算是满足了我的需求，但是还想尝试一下其他的系统，同时从视觉效果上来说Hexo+Next主题目前更让我觉得满意，于是决定从Pelican迁移到Hexo。

问题

搭建、使用Hexo的教程google一下就能找到，这里主要说一下自己迁移过程中遇到的一些小问题。

文档迁移

Pelican本身也是支持Markdown的的文章写作方式，其实需要修正的地方主要是头部的部分属性。

首先可以将Pelican的content目录下的所有Markdown文件复制到Hexo目录下的source/_posts/目录下。

Pelican通过Date，Title，Category，Tags，Slug来表征写作时间、标题、分类、标签、Url等信息，例如：

Date: 2014-09-20
Title: CI连接Oracle 11G数据库
Category: LAMP/LNMP
Tags: PHP,Oracle
Slug: ci-connect-oracle-11g

Date: 2014-09-20

Title: CI连接Oracle 11G数据库

Category: LAMP/LNMP

Tags: PHP,Oracle

Slug: ci-connect-oracle-11g

而Hexo也是类似：

date: 2014-09-20 00:00:00
title: CI连接Oracle 11G数据库
categories: LAMP/LNMP
tags: [PHP,Oracle]
---

date: 2014-09-20 00:00:00

title: CI连接Oracle 11G数据库

categories: LAMP/LNMP

tags: [PHP,Oracle]

---

可以简单使用sed完成转换：

sed -i '' -e 's/Date: \{1,\}\(.\{1,\}$\)/date: \1 00:00:00/' *
sed -i '' -e 's/Title: \{1,\}\(.\{1,\}$\)/title: \1/' *
sed -i '' -e 's/Category: \{1,\}\(.\{1,\}$\)/categories: \1/' *
sed -i '' -e 's/Tags: \{1,\}\(.\{1,\}$\)/tag: [\1]/' *
sed -i '' -e 's/Slug: \{1,\}\(.\{1,\}$\)/---/' *

sed -i '' -e 's/Date: \{1,\}$.\{1,\}$$/date: \1 00:00:00/' *

sed -i '' -e 's/Title: \{1,\}$.\{1,\}$$/title: \1/' *

sed -i '' -e 's/Category: \{1,\}$.\{1,\}$$/categories: \1/' *

sed -i '' -e 's/Tags: \{1,\}$.\{1,\}$$/tag: [\1]/' *

sed -i '' -e 's/Slug: \{1,\}$.\{1,\}$$/---/' *

关于sed -i后的参数问题，参见stackoverflow上关于在Mac OS X下的sed使用问题。

Git设置

允许Git添加非ASCII文件

在hexo deploy过程中会在Git中在添加非ascii文件，所以需要在选项中开启这一设置。

git config hooks.allownonascii true

1 2	git config hooks.allownonascii true

Git中文文件名

某些情况下文章使用了中文tag，而生成Tag时会生成中文文件名的目录文件，Git需要关闭对中文文件名的转码。

git config core.quotepath false

1 2	git config core.quotepath false

GitHub CNAME问题

使用GitHub部署的情况下，绑定自定义域名的方法自然是添加一个CNAME文件，最简单的方法可以使用插件来完成。

最后

以上

Wislay

标签归档：Hexo

Next主题中从服务器加载Google字体

概述

实现