Giter Site home page Giter Site logo

hexo-theme-vateral's Introduction

从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

至此配置基本结束

hexo-theme-vateral's People

Contributors

moumao avatar unstartdev avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar

hexo-theme-vateral's Issues

busuanzi API坏掉了

访问人数计数器挂掉了==
话说大大放着20个open issue真的好吗hhh

主界面无法正常滚动

打开侧边抽屉,点击“标签”后,在点击“主页”,主界面无法正常滚动
error
尝试了两个版本:一个是直接从github上克隆下来,另一个是下载的最新release版本Vateral v1.1.4,均有此问题。

标签页版权信息位置不对

标签页的版权信息位置没有在底部,像这个样子,请问是正常情况吗,不过当我点击某个标签之后然后后退回来标签页,版权信息就靠在底部了
za2i kicqj k8m n 04o

静态文件加载不成功

在主题配置中静态文件配置都是绝对路径,导致加载失败,改成相对路径后,在index文件中还是有少量文件没有配置成功。

出现一个图片外链至您的博客中加载

主题的作者您好,非常喜欢这个主题
不过有点小问题向您反馈一下
在 source/css/main.min.css 文件中,出现了您的网址
653ACDD4-98CC-43BB-A2A5-DC506B849A8C.png
看了下和source/images/link/all.png 文件一模一样,建议删除这条外链。

Demo link broken

Hi,

your demo link seem to be broken
Could you provide a new one?

Thank you

markdown 失效

不知道作者用什么 markdown 编辑,我用 Typra 编辑上传之后发现很多语法都失效了

Changes to vateral.css seem to have no effect

Modifications to vaterial.css don't seem to have any effect on the loaded localhost page. E.g. changing size and text colour of the back to top button in the css file didn't do anything. In another theme, change effect was immediate. Is there some step in Vateral that I'm missing to see these changes?

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.