moumao / hexo-theme-Vateral

😘hexo单页面主题:Vateral(a theme for hexo)
131 stars 38 forks source link
hexo hexo-theme one-page-sites theme

从PC端到移动端,均提供支持

Vateral

hexo主题---Vateral

示例网站:某猫のBlog

如何使用该主题

下载

首先下载主题,解压好后放到themes目录

使用

修改主题文件夹名称,将其改为 Vateral

配置

找到主题里的_config.yml文件

seo:设置seo优化,keywords为网站搜索的关键字,description为网站搜索的网站介绍

favicon:设置icon图标

headbg:设置左侧抽屉中头像部分的背景图

header:设置头像

post_header:设置首页的标语部分,img:标语背景图,about:标语,url:为标语添加一个链接

sns:添加社交账号链接,没有默认不填

sidebar:导航栏配置,如果需要某项,use为ture,反之为false

blendent:在main后设置博客主要配色

*注:about friends photo要在hexo的文章目录下单独创建配置文件

reading:设置自动生成摘要的字数

photo:设置photo界面属性 ,name:相册名称 ,about:相册介绍

about页面:

在 hexo 目录下的 source 文件夹内创建一个名为about的文件夹。

然后在文件内创建一个名为 index.md 的 Markdown 文件。

然后编辑里边的index.md文件

---
title: 关于
date: 2017-03-20 20:57:33
thumbnail: /images/random/bg4.jpg
layout: about
---

friends页面:

在 hexo 目录下的 source 文件夹内创建一个名为friends的文件夹。

然后在文件内创建一个名为 index.md 的 Markdown 文件。

在 index.md 文件内写入如下内容即可。

---
title: friends
date:
layout: friends
---

然后添加friends页面的数据

同样在在 hexo 目录下的 source 文件夹内创建一个名为 _data(禁止改名)的文件夹。

然后在文件内创建一个名为 friends.yml 的文件。

单个友情链接的格式为:

name:
    link: 此处为站点链接
    descr: "介绍"

如果想要添加多个友情链接,重复填写即可

photo界面:

在 hexo 目录下的 source 文件夹内创建一个名为 photo的文件夹。

然后在文件内创建一个名为 index.md 的 Markdown 文件。

在 index.md 文件内写入如下内容即可。

---
title: photo
date:
layout: photo
---

然后添加photo页面的数据    

同样在在 hexo 目录下的 source 文件夹内创建一个名为 _data(禁止改名)的文件夹。

然后在文件内创建一个名为 photo.yml 的文件。

单个图片的格式为:

name:
    large_link: /images/photo/1-large.jpg
    small_link: /images/photo/1-small.jpg
    very_small_link: /images/photo/1-very-small.jpg
    alt: "image 1"

*注:alt属性要对每照片编号

large_link: 原图 small_link: 小图片,建议正方形 very_small_link:模糊加载时首先加载的模糊图片

如果想要添加多个图片,重复填写即可

*注:_data文件夹不用重复创建

文章置顶功能

在需要置顶的文章头部加入如下即可置顶文章

up: true

本地搜索

使用本地搜索需要在hexo目录安装 hexo-generator-search 插件。

然后在_config.yml中添加

search:
    path: search.xml
    field: all

计数统计

在主题配置文件中visitor属性设置为true即可开启全站的计数统计 在post_header属性中,设置visitor_front的值为访客数目的前缀,设置visitor_back的值为访客数目的后缀

博客运行时间统计

在_config.yml文件中的time属性设置为ture,并且设置begin_time属性为开始计时的时间

评论系统

*注:本主题暂时仅支持disqus,所以需要评论功能的话快翻墙注册一个账号吧~

在_config.yml文件中的comment属性,use设置为true,然后将shortname属性设置为你的disqus域名 格式如下:

comment:
    use: true
    shortname: yourname.disqus.com

如果不想使用则把use值设置为false即可

代码高亮

首先安装插件Hexo-Prism-Plugin npm i -S hexo-prism-plugin 在hexo的_config.yml文件中修改增加如下:

prism_plugin:
  mode: 'preprocess'    # realtime:实时解析/preprocess:预处理
  theme: 'default'  # 高亮皮肤 默认为default 可选有default,coy,dark,funky,okaidia,solarizedlight,tomorrow,twiligh
  line_number: false    # default false 是否显示行数

要注意要在_config.yml中增加:

 highlight:
  enable: false
  line_number: false
  auto_detect: false
  tab_replace:

重新生成静态文件这样就有代码高亮了~

ps:欢迎反馈高亮代码样式问题

文章配置

使用hexo命令生成一片新文章后,需要在md文件中进行如下配置

---
title: //文章标题
date: 2017-04-21 10:41:30
categories:
- //文章分类
tags: 
- //文章标签
- //文章标签
up: true //文章是否需要置顶,如果不需要此属性可以不写
thumbnail: //文章的图片url,如果不填则为默认图片
---

至此配置基本结束

如遇bug等问题欢迎反馈

*注:v1.1.3版本已经全面支持了pjax~ 以及一定要在hexo的_config.yml中的url配置上自己站点的url

至此配置基本结束