飞快搭建hexo+github博客.
1
2
3
4
| # 安装hexo
[jimo@jimo-pc workspace]$ hexo init myblog
[jimo@jimo-pc workspace]$ cd myblog
[jimo@jimo-pc workspace]$ npm install
|
配置基本信息:_config.yml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| title: 在我的世界
subtitle: 你是谁,从哪里来,为什么你活着?
description: who,where,what
author: Jackpler
language: zh-Hans
...
# 配置git
deploy:
type: git
repo: git@github.com:jimolonely/jimolonely.github.io.git
branch: master
# message: {{ now('YYYY-MM-DD HH:mm:ss') }} 要上会报错
name: jimolonely
email: xxx@foxmail.com
|
配置标签:/scaffolds/post.md
1
2
3
4
5
6
7
8
| ---
title: {{ title }}
date: {{ date }}
tags:
- java
- hexo
- git
---
|
如何使用标签呢?在每篇文章内定义:
1
2
3
4
| ---
title: Hello World
tags: [hexo]
---
|
运行起来看:
写一篇新文章: 一篇文件名为deploy-hexo-on-github的位于_post/hexo/deploy-hexo-on-github.md的文章
1
2
| # hexo new title -p dir
[jimo@jimo-pc myblog]$ hexo new deploy-hexo-on-github -p hexo/deploy-hexo-on-github
|
关键的:部署到github.
需要先安装插件:
1
| [jimo@jimo-pc myblog]$ npm install hexo-deployer-git --save
|
前提:电脑有github,最好是用SSH链接的,github上也有一个项目.
在更新内容后重新生成再部署:
1
2
| $ hexo generate
$ hexo deploy
|
ok.
下面是高级内容.
如何在markdown里添加图片:
看官方文档:https://hexo.io/docs/asset-folders.html
如何限制图片大小：https://yoheikoga.github.io/2016/04/05/How-to-put-pictures-and-change-sizes-on-your-Hexo-Blog/
如何链接站点内文章
tag/url就是上面的p部分。
1
| {% post_link tag/url 点击这里查看这篇文章 %}
|
或则使用绝对路径(不过不是同一天就不行)
1
| [功能介绍](/2016/7/11/title.html#功能介绍)
|
如何增加About页面:
看文档:https://github.com/iissnan/hexo-theme-next/wiki/%E5%88%9B%E5%BB%BA-%22%E5%85%B3%E4%BA%8E%E6%88%91%22-%E9%A1%B5%E9%9D%A2
如何实现首页read more,而不是全部显示出来?
经过查找,大概有几种方式.
- 直接在文章里加
<!--more-->
- next主题的可以很容易改:
1
2
3
| auto_excerpt:
enable: true
length: 150
|
- 修改源代码: 位于/themes/landscape/layout/_partial/article.ejs
参考文章:https://blog.zthxxx.me/posts/Hexo-Automatic-Add-ReadMore/
原来:
1
2
3
4
5
6
7
8
9
10
11
12
| <div class="article-entry" itemprop="articleBody">
<% if (post.excerpt && index){ %>
<%- post.excerpt %>
<% if (theme.excerpt_link){ %>
<p class="article-more-link">
<a href="<%- url_for(post.path) %>#more"><%= theme.excerpt_link %></a>
</p>
<% } %>
<% } else { %>
<%- post.content %>
<% } %>
</div>
|
现在:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
| <div class="article-entry" itemprop="articleBody">
<% var show_all_content = true %>
<% if (index) { %>
<% if (post.excerpt) { %>
<% show_all_content = false %>
<p>
<%- post.excerpt %>
</p>
<% } else if (theme.auto_excerpt.enable) { %>
<% var br_position = 0 %>
<% for (var br_count = 0; br_count < theme.auto_excerpt.lines; br_count++) { %>
<% br_position = post.content.indexOf('\n',br_position + 1) %>
<% if(br_position < 0) { break } %>
<% } %>
<% if(br_position > 0) { %>
<% show_all_content = false %>
<p>
<%- post.content.substring(0, br_position + 1) %>
<p>
<% } %>
<% } %>
<% } else { %>
<% if (post.toc) { %>
<div id="toc" class="toc-article">
<strong class="toc-title">
<%= __('article.catalogue') %>
</strong>
<%- toc(post.content) %>
</div>
<% } %>
<% } %>
<% if (show_all_content) { %>
<%- post.content %>
</div>
<% } else { %>
</div>
<p class="article-more-link">
<a href="<%- url_for(post.path) %>#more">
<%= theme.excerpt_link %>
</a>
</p>
<% } %>
|
然后再在themes下的_config.yml里配置:
1
2
3
| auto_excerpt:
enable: true
lines: 1
|
如何添加Google分析统计
在themes下的_config.yml里找到:
google_analytics: 你的ID
如何排序文章
一般有2种排序方式:
- 按修改日期
- 按创建日期
只需要确定文章头部是否有date字段即可,有就按创建日期:
1
2
3
4
5
6
7
8
| ---
title: Linux内核
tags:
- linux
- linux kernel
p: linux/008-linux-kernel1
# date: 2018-04-27 14:56:37
---
|
配置这个模板的地方在
hexo代码样式
原版采用highlight.js
hexo代码块等宽字体
最近发现hexo默认的代码块里面的字符没对齐，源于粘贴了字符图，开始以为是样式问题，
后来发现是字体不等宽导致的，于是开始换字体。
在themes/landscape/source/css/highlight.styl里，发现下面控制着字体：
1
2
3
4
| .article-entry
pre, code
font-family: font-mono
font-size: 1em
|
于是我直接改了这里，发现并不起作用。
后来发现，这个font-mono是个变量，真正的字体定义是在_variables.styl里：
1
2
3
4
5
6
7
8
9
10
11
12
13
| // Fonts
font-sans = Consolas, Monaco, Menlo, Consolas, monospace, -apple-system, BlinkMacSystemFont,
"Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell",
"Fira Sans", "Droid Sans", "Helvetica Neue",
sans-serif
font-serif = Consolas, Monaco, Menlo, Consolas, monospace, Georgia, "Times New Roman", serif
font-mono = Consolas, monospace
font-icon = FontAwesome
font-icon-path = "fonts/fontawesome-webfont"
font-icon-version = "4.0.3"
font-size = 14px
line-height = 1.6em
line-height-title = 1.1em
|
上面已经是我改过的，我优先使用Consolas字体。
小插曲： font-mono的修改并不是那么简单， 我的方法是在浏览器中直接修改样式看哪个字体起作用，最后只剩下Consolas, monospace时ok了。