0%

Install hexo dependency

1
$ npm install --save hexo-pdf

Usage

post_asset_folder: true的情况下你就可以在 /source/_posts 目录下用和 xxx.md同名的文件夹保存图片和 pdf 文件

然后键入:

1
{% pdf ./xxx.pdf %}

_config.yml 文件里:

1

1
<object data="./xxx.pdf" type="application/pdf" width="100%" height="1000px">

object 可换成 embed, iframe

在文章中插入图片

绝对路径本地引用

当Hexo项目中只用到少量图片时,可以将图片统一放在source/images文件夹中,通过markdown语法访问它们。

1
![](/images/image.jpg)

图片既可以在首页内容中访问到,也可以在文章正文中访问到。

相对路径本地引用

图片除了可以放在统一的images文件夹中,还可以放在文章自己的目录中。

文章的目录可以通过站点配置文件_config.yml来生成。

1
post_asset_folder: true

将_config.yml文件中的配置项post_asset_folder设为true后,执行命令_

1
hexo new post_name

在source/_posts中会生成文章post_name.md和同名文件夹post_name。

将图片资源放在post_name中,文章就可以使用相对路径引用图片资源了。

1
![](image.jpg)

相关文章推荐

该功能由 hexo-related-popular-posts 插件提供,会在文末出现本站相关的博客。

在站点根目录中执行以下命令安装依赖:

1
npm install hexo-related-popular-posts --save

在主题配置文件中开启相关文章推荐功能:

1
2
3
4
5
6
7
8
# themes\next_config.yml

related_posts:
enable: true
title: # custom header, leave empty to use the default one
display_in_home: false
params:
maxCount: 5

此时会在每篇文章结尾根据标签相关性和内容相关性来推荐相关文章。

修改文章 meta 信息

默认主题下, 标题下方会显示文章的创建时间、文章的修改时间、文章分类信息等元数据,用户可以在主题配置文件中自定义设置需要显示的 meta 元信息:

# themes\next\_config.yml

post_meta:
  item_text: true  # 显示文字说明
  created_at: true  # 显示文章创建时间
  updated_at:
    enabled: false  # 隐藏文章修改时间
    another_day: true  # 只有当修改时间和创建时间不是同一天的时候才显示
  categories: false  # 隐藏分类信息

添加社交链接

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
# themes\next\_config.yml

social:
GitHub: https://github.com/yourname || github
E-Mail: mailto:yourname@gmail.com || envelope
Weibo: https://weibo.com/yourname || weibo
Google: https://plus.google.com/yourname || google
Twitter: https://twitter.com/yourname || twitter
FB Page: https://www.facebook.com/yourname || facebook
VK Group: https://vk.com/yourname || vk
StackOverflow: https://stackoverflow.com/yourname || stack-overflow
YouTube: https://youtube.com/yourname || youtube
Instagram: https://instagram.com/yourname || instagram
Skype: skype:yourname?call|chat || skype

social_icons:
enable: true # 显示社交软件图标
icons_only: false # 显示图标的同时显示文字

修改网站 Favicon

Favicon 即浏览器标签左侧的图标。下载自己喜欢的图标置于 themes\next\source\images\ 目录下。 这里介绍一个在线制作 favicon的网站,可以上传喜欢的图片制作成favicon

1
2
3
4
5
6
# theme\next\_config.yml
favicon:
small: /images/favicon-16x16-next.png # 小图标
medium: /images/favicon-32x32-next.png # 大图标
apple_touch_icon: /images/apple-touch-icon-next.png # 苹果图标
safari_pinned_tab: /images/logo.svg # safari浏览器标签页图标

修改站点页脚

在主题配置文件中修改网站页脚信息

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
# themes\next\_config.yml

footer: # 底部信息区
since: 2018 # 建站时间
icon:
name: heart # 图标名称
animated: true # 开启动画
color: "#ff0000" # 图标颜色

powered:
enable: false # 隐藏由 Hexo 强力驱动
version: false # 隐藏 Hexo 版本号

theme:
enable: false # 隐藏所用的主题名称
version: false # 隐藏主题版本号

首页显示文章摘要

默认的主题配置里,首页会显示每一篇文章的全文,如果想只显示文章摘要,对主题配置文件做如下更改

1
2
3
4
5
# theme/next/_config.yml

auto_excerpt:
enable: true # 开启自动摘要提取
length: 150

此时文中的前150个字符将作为摘要。

用户可以在文章中通过<!-- more -->标记来精确划分摘要信息,标记之前的段落将作为摘要显示在首页。

如果在文章的 Front-Matter 中有非空的 description 字段,则该字段的内容会被作为摘要显示在首页。

更改导航栏

主题首页的默认页面中是没有标签、分类、归档页面的,需要手动生成一下。先在博客根目录下打开git-bash或终端,然后键入以下命令

1
hexo new page tags && hexo new page categories && hexo new page archives

然后打开新增的source/tags/index.md,修改如下

1
2
3
4
# source\tags\index.md
title: 标签
date: 2018-10-19 22:57:00
+ type: tags

同理再修改另外两个新增文件夹下的index.md

最后修改主题配置文件的menu字段

1
2
3
4
5
6
7
# themes\next\_config.yml
menu:
home: / || home
about: /about/ || user
+ tags: /tags/ || tags
+ categories: /categories/ || th
+ archives: /archives/ || archive