Hexo even主题博客配置
为了更好的阅读体验,请访问个人博客地址:
https://xiuxiuing.gitee.io/blog/2018/08/10/blogsetting/
按照博客 使用Gitee+Hexo搭建个人博客 的教程,我们已经成功在Gitee上搭建完成了自己的博客,但是这个博客还是比较简陋的。
接下来讲介绍 如何开始写作 和 Even主题的常用配置 。
如何开始写作
博客搭建完成,虽然功能很简单,但是已经可以开始写作。
- 新建文章
使用命令来新建一篇文章:
$ hexo new [layout] <title>
layout
是文章的布局,默认为post
,可以先不写。
title
是文章的标题,也是文件的名字,存储在source/_posts
下。
使用MarkDown编辑器打开文件就可以开始写作了。
Front-matter 设置
Front-matter 是文章最上方以 — 分隔的区域,用于指定文章的变量设置,举例来说:title: Hello World date: 2013/7/13 20:46:25 <hr />
以下是预先定义的参数,您可在模板中使用这些参数值并加以利用。
参数 | 描述 | 默认值 |
---|---|---|
layout | 布局 | |
title | 标题 | |
date | 建立日期 | 文件建立日期 |
updated | 更新日期 | 文件更新日期 |
comments | 开启文章的评论功能 | true |
tags | 标签 | (不适用于分页) |
categories | 分类 | (不适用于分页) |
permalink | 覆盖文章网址 |
- 文章分类和标签
只有文章支持分类和标签,您可以在 Front-matter 中设置。在其他系统中,分类和标签听起来很接近,但是在 Hexo 中两者有着明显的差别:分类具有顺序性和层次性,也就是说 Foo, Bar 不等于 Bar, Foo;而标签没有顺序和层次。设置示例:
categories:
- Diary
tags:
- PS3
- Games
说明:文章分类和标签的设置,会自动归档的菜单的分类和标签中。
文章截断
在文章内容中添加 即可在首页显示时只显示其之上的内容。
并且会在 添加一个 Read more 的链接。自定义文章简述
可在文章头信息中添加 description 字段,并填写自定义的文章简述。
就可以在首页显示文章简述而不显示文章内容。
Even主题常用配置
我们博客搭建完成后Hexo的目录结构如下:
.
├── _config.yml
├── package.json
├── scaffolds
├── source
| ├── _drafts
| └── _posts
├── themes
| ├── even
| └── landscape
我们Even主题的配置则主要在even
目录下进行,配置文件_config.yml
,目录结构如下:
.
├── _config.yml
├── package.json
├── scaffolds
├── source
| ├── css
| └── js
├── languages
| ├── default.yml
| └── zh-cn.yml
|── layout
修改主题颜色
主题自带了 5 种可选的颜色:
修改主题配置文件中 theme 字段的 color 属性可改变主题色:# ===========================================# Theme Settings# ===========================================# theme styling# color: Default | Mint Green | Cobalt Blue | Hot Pink | Dark Violettheme: color: Default
除了能够修改为主题自带的 5 种颜色之外,还可以使用自定义的其他颜色。
在source/css/_custom/_custom.scss
中添加样式变量$theme-color
修改主题色。$theme-color: #xxxxxx;
同时需要修改
$deputy-color
主题副颜色,该值主要使用在代码块背景以及文章目录。$deputy-color: #xxxxxx;
_variables.scss
中的样式变量都可以在_custom.scss
中进行覆盖,从而自定义主题样式。添加分类页
使用命令新建一个 categories 页面:hexo new page categories
编辑生成的
categories/index.md
文件,设置布局为categories
:title: categories layout: categories
默认开启评论(如果使用了多说或 Disqus),添加 comments 字段并设置为 false 可关闭。
在主题配置文件(
_config.yml
)中添加链接:# ===========================================# Menu Settings# ===========================================menu: Home: / Archives: /archives/ Categories: /categories/
添加标签页
使用命令新建一个 tags 页面:hexo new page tags
编辑生成的
tags/index.md
文件,设置布局为 tags:title: tags layout: tags
默认开启评论,添加 comments 字段并设置为 false 可关闭。
在主题配置文件(
_config.yml
)中添加链接:# ===========================================# Menu Settings# ===========================================menu: Home: / Archives: /archives/ Tags: /tags
添加自定义页面
使用命令新建一个自定义页面(以添加关于页为例):hexo new page about
编辑生成的 about/index.md 文件,设置布局为 page:
title: about layout: page
关于页面的内容,个人相关介绍也是在此页面进行编辑。
默认开启评论(如果使用了多说或 Disqus),添加 comments 字段并设置为 false 可关闭。在主题配置文件(_config.yml)中添加链接:
# ===========================================# Menu Settings# ===========================================menu: Home: / Archives: /archives/ About: /about
在使用的语言文件下添加对应的字段(默认为 languages/default.yml):
menu: home: Home archives: Archives tags: Tags categories: Categories about: About
添加文章访问量统计
文章访问量统计通过 LeadCloud 支持配置LeanCloud
打开LeanCloud官网,进入注册页面注册。完成邮箱激活后,点击头像,进入控制台页面创建新应用
创建一个新应用,并创建名称为 Counter 的 Class(注意权限选择无限制)配置 app_id 与 app_key
在你所创建的应用的 设置->应用Key 中查看 app_id 与 app_key修改主题配置文件
_config.yml
,填入app_id
与app_key
:# LeanCloudleancloud: app_id: app_key:
设置 Web 安全域名
在你所创建的应用的 设置->安全中心 中设置 Web 安全域名 添加你的域名到 Web 安全域名中(若本地服务也想看到访问量,添加 http://localhost:4000/)设置文章打赏
通过主题配置文件中的 reward 字段开启/关闭:reward: enable: true qrCode: wechat: /image/reward/wechat.pngalipay: /image/reward/alipay.png
支持微信以及支付宝,修改 qrCode 下对应的二维码图片链接,也可以直接设置成图片的网络链接。
当开启打赏功能时,可通过文章 Markdown 头部:
reward: false
关闭该篇文章的打赏。反之,当打赏功能关闭时,可以在文章中单独开启。
设置底部社交链接
目前支持:Email, Stack Overflow, Twitter, Facebook, Github, 微博以及知乎修改主题配置文件中的 social 字段下的各个字段开启,为空时即为关闭:
social: email: your@email.com stack-overflow: twitter: facebook: github: weibo: zhihu:
主题使用的是自定义的 iconfont 图标库。
设置文章版权
修改主题配置文件中的 copyright 字段开启/关闭:copyright: enable: true# https://creativecommons.org/license: '本文采用<a rel="license" href="http://creativecommons.org/licenses/by-nc/4.0/">知识共享署名-非商业性使用 4.0 国际许可协议</a>进行许可'
默认显示作者,来源,链接以及版权说明,版权说明可通过
copyright.lincese
自定义。copyright.license
的值可以是 HTML当文章版权信息开启时,可通过文章 Markdown 头部:
copyright: false
进行单篇文章版权信息的关闭。
至此博客基本配置好了,大家可以愉快的写博客啦!!!
配置完成的博客效果可以参考:https://xiuxiuing.gitee.io/blog/
Hexo even主题博客配置相关推荐
- 通过Hexo搭建个人博客以及主题配置
这是蓝鸟x发布的第一篇文章 前言 直接在github page平台上托管我们的博客.这样就可以安心的来写作,又不需要定期维护,而且hexo作为一个快速简洁的博客框架,用它来搭建博客真的非常容易. He ...
- hexo+gitHub 个人博客搭建及更换主题历程(特适合入门小白)
内容涵盖 hexo+gitHub 个人博客搭建 搭建过程中遇到的问题及解决方案 更换主题 1. gitHub 创建博客仓库 (1) 注册Github(如果已注册可以忽略次此步骤) 详细注册步骤请参考: ...
- Hexo 搭建个人博客 基础配置及实操
初步搭建本地Hexo博客 安装 安装前提 搭建环境:Windows 10 Node.js (Node.js 版本需不低于 8.10,建议使用 Node.js 10.0 及以上版本) Git 验证成功安 ...
- 【开发环境】(基于Hexo)个人博客主题(Hexo Fluid)更换
目录 一.Hexo Fluid: 二.安装主题: 指定主题: 创建「关于页」: 三.更多自定义设置: 一.Hexo Fluid: Hexo Fluid 用户手册 (fluid-dev.com)http ...
- hexo下yilia主题博客个性化自定义
我的博客采用的hexo下的yilia主题,这篇文章记录一下自己折腾配置博客的方法和经过. 首先是创建博客的基本的几个命令 hexo g # 生成博客网页文件 hexo s # 本地预览博客,打开本地网 ...
- Linux下使用 github+hexo 搭建个人博客04-next主题优化
上篇我们说了 hexo 的优化,针对的站点的优化. 本篇讲解 next 主题的优化,包括:使用语言.前端页面显示宽度.菜单.侧栏.头像.添加或取消动画效果.打赏功能等等. 让页面排版更符合我们所要的功 ...
- 给hexo搭建的博客更换主题
怎么给hexo搭建的博客更换主题 首先要进入hexo的官网主题界面,找到你所想要的主题 网址:https://hexo.io/themes/ 点进该主题,就会进入你选中的主题的拥有者的博客,你就可以看 ...
- 想使用hexo(个人博客的方案) Next(主题)搭建一个个人的照片墙
想使用hexo(个人博客的方案) Next(主题)搭建一个个人的照片墙 方案1:自己写js的code 方案2: hexo-insta-wall (好像不对,是把instagram的图片爬下来,这和自 ...
- 【Hexo】Hexo-NexT主题-博客搭建
为了记录我的大学生活的学习,在2020春节前决定搭建一个自己的博客来记录自己大学四年的生活和学习,本文为参考b站up:Mackxin的教程来进行记录我对Hexo-next主题的学习过程以及练练手,以后 ...
- 利用Hexo搭建个人博客-博客初始化篇
上一篇博文 <利用Hexo搭建个人博客-环境搭建篇> 中,我们讲解了利用Hexo搭建个人博客应该要配置哪些环境. 相信大家已经迫不及待的想要知道接下来应该要怎么把自己的博客搭起来了,下面, ...
最新文章
- MyBatis 入门
- 你住的城市7.5亿年前长啥样?这张互动地图能让你看到
- RPC 的概念模型与实现解析
- mysql互为主从复制配置笔记--未读,稍后学习
- ML之回归预测:利用十(xgboost,10-1)种机器学习算法对无人驾驶汽车系统参数(2017年的data,18+2)进行回归预测值VS真实值——bug调试记录
- Linux bash逐行读取文件的方法
- 我的第一个CCIE-ccie6961
- uva 11997——K Smallest Sums
- 机器学习知识总结系列-机器学习中的优化算法总结(1-4)
- OJ1021: 三个整数的最大值
- Spring中的事务回滚 网上比较不错的文章
- 音视频开发(11)---基于B/S模式的视频监控系统设计
- oc基础-protocol协议的使用
- rp文件,怎么用浏览器预览
- fw313r手机登录_fw313r路由器设置
- [Java教程 00] 计算机基础
- Twitter与微博
- 如何将图片调整为固定大小?怎么自定义压缩图片大小?
- pytorch矩阵乘法mm,bmm
- 了解爬虫的风险与以及如何规避风险-Java网络爬虫系统性学习与实战系列(3)