Hexo搭建 --- 3、Hexo发布文章详解

简单发布文章

  • 在Hexo根目录下打开cmd终端命令:1hexo new "文件名"

此命令会在/hexo/source/_posts下创建一个文件名.md文件,然后就可以使用markdown编辑器开始写自己的博客了。

  • 打开生成的默认文章模板。 --- title: new #博客标题 date: 2017-2-19 21:20:57 #创建时间 tags: #标签 --- 这里写正文(上面的---是必要的)

  • 本地查看预览效果 1hexo s

浏览器打开 http://localhost:4000/ 即可查看效果,默认端口为4000 自定义端口为80: hexo s p 80

  • 部署到Coding上1hexo clean && hexo g && hexo d

hexo clean 清理本地缓存 hexo g 全称: generate,生成静态html文件。 hexo d 全称:deploy 部署到Coding上。 注:部署到Coding上需要先按照插件,在cmd中输入 npm install hexo-deployer-git --save

高级文章设置

Hexo new 的分类

Hexo对生成文章有三种分类:

  1. post:也是默认的方式,一般指一篇博客。
  2. page:指生成一个页面,一般用来做标签和关于页
  3. draft:指草稿,我个人很少用。

生成方式是:hexo new [layout] <title> 比如: hexo new page tags ,即为生成一个名为tags的页面。

文档模板修改

当我们使用 hexo new [layout] <title> 生成文章的生成的文件都是有默认模板的。 比如hexo new post 模板测试

---
title: 模板测试
date: 2017-2-19 21:53:03 
tags: 
---

比如我的博客每次都要加 markdown源码下载。那么对每个文件都要加上相应的代码,那么不如修改一下模板文件,让new文章的时候就能加上相应的代码,岂不省事。

  • 实现修改模板功能 其实每次我们执行 hexo new [layout] <title> 时,Hexo都会去scaffolds文件夹中寻找[layout].md,并根据其内容建立文章。 那么我们直接修改对应的 .md 模板文件即可,或者自己添加一个 demo.md 文件,创建文件的时候执行hexo new demo <title> 即可。

Front-matter详解

Front-matter 是文件最上方以 — 分隔的区域,用于指定个别文件的变量,举例来说:

---
title: 模板测试
date: 2017-2-19 22:04:39
tags:

以下是预先定义的参数,您可在模板中使用这些参数值并加以利用。

参数

描述

默认值

layout

布局

title

标题

date

建立日期

文件建立日期

updated

更新日期

文件更新日期

comments

开启文章的评论功能

true

tags

标签(不适用于分页)

categories

分类(不适用于分页)

permalink

覆盖文章网址

注意: 如一个文章有多个tags的话,语法为: --- title: 标题 date: 2017-2-19 22:12:29 tags: - 标签1 - 标签2 ---

Hexo官方说明不支持一个文章与多个categories(分类) Hexo官方文档对于分类的解释

如何关闭新建页面的评论功能?

当集成了评论系统,如 多说 或者 Disqus,所有新建的页面都将自动开启评论。若你不需要评论,请在页面的 Front-matter 里添加 comments 字段,并将值设置为 false。如下所示:

---
title: new title
date: 2017-2-21 21:34:29
comments: false
---

如何设置页面文章的篇数?

  1. 使用 npm install --save 命令来安装需要的 Hexo 插件。
  2. 等待扩展全部安装完成后,在 站点配置文章 中,设定如下选项:1 2 3 4 5 6 7 8 9 10index_generator: per_page: 5 ##首页显示的文章篇数 archive_generator: per_page: 20 ##归档页显示的文章篇数 yearly: true monthly: true tag_generator: per_page: 10

内置标签

标签插件和 Front-matter 中的标签不同,它们是用于在文章中快速插入特定内容的插件。

文本居中

使用方式:

index_generator:
  per_page: 5  ##首页显示的文章篇数

archive_generator:
  per_page: 20    ##归档页显示的文章篇数
  yearly: true   
  monthly: true  

tag_generator:
  per_page: 10

效果示例:

引用块

在文章中插入引言,可包含作者、来源和标题。

{% blockquote [author[, source]] [link] [source_link_title] %}
content
{% endblockquote %}

简单点说两种用法:

  • 引用名人名言
{% blockquote 鲁迅, 《记念刘和珍君》%}
真的猛士,敢于直面惨淡的人生,敢于正视淋漓的鲜血
{% endblockquote %}

  • 引用别人网站的文章或其他
{% blockquote @DevDocs https://twitter.com/devdocs/status/356095192085962752 %}
NEW: DevDocs now comes with syntax highlighting. http://devdocs.io
{% endblockquote %}

突破容器宽度限制的图片

当使用此标签引用图片时,图片将自动扩大 26%,并突破文章容器的宽度。 此标签使用于需要突出显示的图片, 图片的扩大与容器的偏差从视觉上提升图片的吸引力。 此标签有两种调用方式(详细参看底下示例): 使用方式:

<!-- HTML方式: 直接在 Markdown 文件中编写 HTML 来调用 -->
<!-- 其中 class="full-image" 是必须的 -->
<img src="/image-url" class="full-image" />

    <!-- 标签 方式,要求版本在0.4.5或以上 -->
{% fullimage /image-url, alt, title %}

<!-- 别名 -->
{% fi /image-url, alt, title %}

效果示例:

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏黑白安全

burpsuite检测xss漏洞 burpsuite实战指南

XSS(跨站脚本攻击)漏洞是Web应用程序中最常见的漏洞之一,它指的是恶意攻击者往Web页面里插入恶意html代码,当用户浏览该页之时,嵌入其中Web里面的ht...

1K20
来自专栏地方网络工作室的专栏

Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(十二)打包项目图片等资源的处理

Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(十二)打包项目图片等资源的处理 前情回顾 在《Vue2+VueRoute...

20470
来自专栏指路者

如何远程控制局域网内的电脑评论(0)

,比如在公司有的同事有某个问题上不会解决,需要用到远程控制帮他操作。还有很多的游戏代练公司需要由一个人同时操作好几台的电脑,在每台电脑上都登录着不同的游戏账号进...

14620
来自专栏进击的君君的前端之路

从 URL 输入到页面展现发生了什么

17540
来自专栏技术墨客

构建用于生产的React静态化单页面服务 原

React 作为一项热门的前端开发技术,现在使用它的团队越来越多。之前也介绍了react 的所有的特性,但是仅仅了解怎么开发 react 只走了万里长征的第一步...

73440
来自专栏iOS Developer

React Native在Mac上部署iOS开发环境

16250
来自专栏北京马哥教育

Linux 下使用 Sar 简介

介绍 Sar 最早是实现在 Salaris Unix 系统里,后来移植到了大部分其他的 Unix 系统(如AIX,HP-UX等)。Linux 下也有法国人写的 ...

41570
来自专栏张善友的专栏

使用密码记录工具keepass来保存密码

在第一章,曾经给过您建议,密码不要保存在文档中,那样不安全,如果密码很多而且又很复杂,人的大脑是不可能很容易记住的,只能记录下来,如果不能记在文档中那记在哪里呢...

46290
来自专栏木子昭的博客

chrono 让Chrome下载资源更容易

众所周知, chrome原生的下载功能并不好用, 以查看下载任务为例, 我们需要点击两次(点击右上角 三个点 , 点击下载内容) 才能查看当前的任务

14220
来自专栏专注数据中心高性能网络技术研发

ubuntu17.04新安装之后的软件准备

以下是亲自试验可用的 1.最简化安装ubuntu17.04之后,没有安装wifi驱动。   此时可以先添加一些软件源   网易源地址: deb http://m...

38750

扫码关注云+社区

领取腾讯云代金券