第三方服务

Fancybox图片预览

将需要放大预览的图片用<fancybox></fancybox>包含起来。
例如这个图是不能点开的:

而这个图是可以点开的:



源码:

1
2
3
4
5
6
例如这个图是不能点开的:
![](https://img.vim-cn.com/52/a54815c02ce232f11f54b2c547c1337828833c.png)
而这个图是可以点开的:
<fancybox>
![](https://img.vim-cn.com/52/a54815c02ce232f11f54b2c547c1337828833c.png)
</fancybox>

一行显示多图

将多个图片同时放在一对<fancybox></fancybox>中即可:

1
2
3
4
5
6
7
<fancybox>
![](https://cdn.jsdelivr.net/gh/xaoxuu/[email protected]/wiki/material-x/349a2633dbfb842ea62ff9d810ca9b4a8dbb33.png)
![](https://cdn.jsdelivr.net/gh/xaoxuu/[email protected]/wiki/material-x/9ae699a4d7c8a7fa5a3007fc37e0b61b5b55bd.png)
![](https://cdn.jsdelivr.net/gh/xaoxuu/[email protected]/wiki/material-x/d3f01cd009b11025b453c697173855649d01a0.png)
![](https://cdn.jsdelivr.net/gh/xaoxuu/[email protected]/wiki/material-x/7a9f2a9360f6c8a4da9e00f5e1e8500ddbb223.png)
![](https://cdn.jsdelivr.net/gh/xaoxuu/[email protected]/wiki/material-x/fffd5955330a5d55c55401539da4bac77d5438.png)
</fancybox>

今日诗词

在侧边栏author小部件中找到或者新增jinrishici字段。

取值含义
false不加载,不显示
true显示,当请求失败时显示config.title
String显示,当请求失败时显示String

在博客根目录的配置文件中:

1
2
3
4
5
6
# 侧边栏小部件
widgets:
- widget: author
avatar: https://cdn.jsdelivr.net/gh/xaoxuu/[email protected]/avatar/avatar.png
jinrishici: 柳暗花明又一村
social: true

APlayer播放器

字段含义是否必须值类型默认值
color音乐控件的主题色HEX颜色值字符串-
volume默认音量0~1之间的浮点数0.7
mode播放模式枚举,详见【mode】circulation
server服务器枚举,详见【server】-
type表明id值是单曲、专辑还是歌单枚举,详见【type】-
id列表idString‘’

mode:

取值含义
random随机
single单曲
order列表顺序
circulation列表循环

server:

取值含义
netease网易云
tencentQQ音乐
xiami虾米
kugou酷狗

type:

取值含义
song单曲
album专辑
playlist播放列表

评论系统

提供3种可选,如果你使用其他的评论系统,请自己修改主题。

Disqus

官网: https://disqus.com/

在博客根目录的配置文件中:

1
2
# disqus评论
disqus_shortname: #你的disqus的shortname#

Gitalk

官网: https://github.com/gitalk/gitalk

在博客根目录的配置文件中:

1
2
3
4
5
6
gitalk: 要使用哪个请复制到根目录配置文件!
clientID: 你的clientID
clientSecret: 你的clientSecret
repo: 你的repo名
owner: 你的GitHub名
admin: [] 至少填写你的GitHub名

clientID和clientSecret的获取方法可自行搜索教程,这里仅简单描述一下步骤:

  1. 点击 GitHub -> Settings https://github.com/settings/profile
  2. 点击 Developer settings https://github.com/settings/developers
  3. 点击 New OAuth App https://github.com/settings/applications/new
  4. 填写信息:
    Application name 随便填,我的是:xaoxuu.com
    Homepage URLAuthorization callback URL 都写你的网址,我的是:https://xaoxuu.com

可以通过设置gitalk.id实现多个页面共用一个评论框。

在文章的Front-matter中:

1
2
3
4
---
gitalk:
id: /wiki/material-x/
---

Valine

官网: https://valine.js.org

在博客根目录的配置文件中:

1
2
3
leancloud:
app_id: 你的appId
app_key: 你的appKey

在主题的配置文件中:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
valine:
enable: true # 如果你想用Valine评论系统,请设置enable为true
volantis: true # 是否启用volantis版本(禁止匿名,增加若干贴吧、QQ表情)
# 还需要在根目录配置文件中添加下面这三行内容
# leancloud:
# app_id: 你的appId
# app_key: 你的appKey
guest_info: nick,mail,link #valine comment header info
placeholder: 快来评论吧~ # valine comment input placeholder(like: Please leave your footprints )
avatar: mp # gravatar style https://valine.js.org/avatar
pageSize: 20 # comment list page size
verify: false # valine verify code (true/false)
notify: false # valine mail notify (true/false)
lang: zh-cn
highlight: false

其中,placeholder支持在Front-matter中设置。

在文章的Front-matter中:

1
2
3
4
---
valine:
placeholder: 你觉得xxx怎么样呢?
---

也可以通过设置valine.path实现多个页面共用一个评论框。

在文章的Front-matter中:

1
2
3
4
---
valine:
path: /wiki/material-x/
---

Livere

官网: http://www.laibili.com.cn/

在博客根目录的配置文件中:

1
2
# 来必力评论
livere_uid: #你的livere的uid

在这里查看你的uid:https://livere.com/insight/myCode,在【代码管理 -> 一般网站】中找到如下这段代码,其中 data-uid 中的内容就是你的 livere_uid

1
2
3
<!-- 来必力City版安装代码 -->
<div id="lv-container" data-id="city" data-uid="你的livere的uid">
...

推荐文章

安装和配置推荐文章插件

  1. 安装插件
1
npm i S hexo-related-popular-posts
  1. 在需要显示的位置添加widget

例如侧边栏:

1
2
sidebar:
- widget: related_posts

插件的自定义配置方法:https://github.com/tea3/hexo-related-popular-posts

分析与统计

默认支持不蒜子的访问统计,可以添加百度统计和Google Analytics。

百度统计

源文件相关字段功能
./_config.ymlbaidu_analytics_key百度统计的key

Google Analytics

源文件相关字段功能
./_config.ymlgoogle_analytics_keyGoogle Analytics的key

CNZZ统计

请参考ZYMIN网友的这篇教程:《hexo+ejs+material x 添加CNZZ统计代码》

字数统计和阅读时长、网站运行时间

请参考TRHX网友的这篇教程:《Hexo 博客主题个性化》

live2d看板娘

请参考TRHX网友的这篇教程:《Hexo 博客主题个性化》

鼠标样式、动画、爱心、烟花等效果

请参考TRHX网友的这篇教程:《Hexo 博客主题个性化》




评论

有疑问请前往本项目的【Issue】页面搜索问题,如果没有相关问题,点击【New issue】进行提问。