部分页面相关数据调用方式
该文章发布时间
<%= date(post.date, 'MM-DD') %>
文章路径 含域名
<%= post.permalink %>
文章路径 不含域名,完整相对路径
<%= url_for(post.path) %>
文章路径 不含域名,只提取文章路径
<%= post.path %>
归档相对年链接
<%= url_for("/archives/" + year + "/") %>
文章标题
<%= post.title %>
没有填写标题时默认显示
<%= post.title || 'Untitled' %>
<%= post.content
.replace(/<[^>]*>/ig, ' ')
.substr(0, 50) %>
<% if(post.categories.data[0]){ %>
<a class="category-link" href="<%= url_for(post.categories.data[0].path) %>"><i class="fa fa-folder-open"></i> <%= post.categories.data[0].name %></a>
<% } else { %>
<i class="fa fa-folder-open"></i> <%= 'Uncategorized' %>
<% } %>
<%= post.tags.length %>
获取最新60篇内容
<%
var posts = page.posts.data;
var recentPosts = page.posts.data.slice(0, 60);
%>
<% recentPosts.forEach(function(post){ %>
<li>
<a href="<%= url_for(post.path) %>"><%= post.title %></a>
</li>
<% }) %>
静态资源增加时间后缀
<%- css(['css/style.css' + '?v=' + date(Date.now(), 'YYYYMMDDHms')]) %>
pinwu 转移内容
安装
先安装环境相关软件
安装hexo
npm install -g hexo-cli
打补丁修复BUG
npm audit fix
mac xos 无法安装解决方法
加上sudo执行,按回车,输入机器密码即可(如果还是不行多试试,可能还是会报错,我是已经创建好从windows拷贝过来,试了试能执行hexo g之类的命令)。
sudo npm install -g hexo-cli
摘自:npm install 总是报错(Mac OS环境下)
如果还是不行,先检查下node、git是否正常安装,查看版本 node -v
git --v
安装好后,打开要存放hexo文件的目录,在空白处按住Shift单击右键,选择【在此处打开命令窗口】 然后执行一下命令 <folder>
为你要存放hexo的文件夹,可以事先建立
$ hexo init <folder>
$ cd <folder>
$ npm install
创建好后可以在_config.yml文件中设置博客的相关信息。
Welcome to Hexo! This is your very first post. Check documentation for more info. If you get any problems when using Hexo, you can find the answer in troubleshooting or you can ask me on GitHub.
Quick Start
Create a new post
$ hexo new "My New Post"
More info: Writing
Run server
$ hexo server
More info: Server
Generate static files
$ hexo generate
More info: Generating
Deploy to remote sites
$ hexo deploy
More info: Deployment
发布
参数 | 说明 | 值 |
---|---|---|
layout | 布局 | post、page、draft |
title | 标题 | |
date | 建立日期 | 文件建立日期 |
updated | 更新日期 | 文件更新日期 |
comments | 开启文章的评论功能 | true |
tags | 标签(不适用于分页) | |
categories | 分类(不适用于分页) | |
permalink | 覆盖文章网址 |
多个标签
tags:
- PS3
- Games
子分类
不可设置多分类
categories:
- Diary
- Life
自定义链接(Permalinks)
网站根目录
網站存放在子目錄
如果您的網站存放在子目錄中,例如 http://example.org/blog,請將您的 url 設為 http://example.org/blog 並把 root 設為 /blog/。
文章链接
變數 描述
:year 文章的發表年份(4 位數)
:month 文章的發表月份(2 位數)
:i_month 文章的發表月份(去掉開頭的零)
:day 文章的發表日期 (2 位數)
:i_day 文章的發表日期(去掉開頭的零)
:title 檔案名稱
:id 文章 ID
:category 分類。如果文章沒有分類,則是 default_category 設定。
演示多个分类
设置
categories:
- foo
- bar
效果
:category/:title foo/bar/hello-world
文件不被模版渲染
source下的md和html文件不被模版渲染生成
---
layout: false
---
整个目录不被渲染 修改根目录_config.yml文件中skip_render。(假设projects为source目录下的文件夹)
skip_render: projects/**
插件
安装或移除插件
# hexo安装xxx插件
npm install xxx –save
# hexo卸载xxx插件
npm uninstall xxx
推荐插件
- hexo-autoprefixer 自动修复css文件或补充浏览器厂商前缀
- hexo-deployer-git 介于用gitlab和coding直接部署十分方便,所以这个插件不再推荐
- hexo-filter-lqip 图片懒加载和低质量异步加载原图
- hexo-filter-responsive-images 生成多个尺寸的图片
- hexo-filter-optimize
- hexo-generator-alias 重定向插件,页面重定向指定网址,或者多个路径重定向到当前文档
- hexo-html-minifier
- hexo-submit-urls-to-search-engine 主动推送Hexo博客新链接至谷歌必应百度搜索引擎,提升网站收录质量和速度。https://github.com/cjh0613/hexo-submit-urls-to-search-engine
hexo-generator-amp
https://github.com/tea3/hexo-generator-amp
自动生成 AMP,普通链接为 http://localhost:4000/posts/
AMP 链接为 http://localhost:4000/posts/amp/
,另外需要在模板 head 文件配置 AMP 链接。
支持选择 AMP 模板,支持谷歌广告。
hexo-external-link
https://github.com/hvnobug/hexo-external-link
自动为 a 标签外链 增加 target='_blank', rel='external nofollow noopener noreferrer'
属性,并且可以自定义,还可以生成外链跳转页面 go.html
。好像没有白名单功能。
安装
npm install hexo-external-link --save
hexo-autonofollow
https://github.com/liuzc/hexo-autonofollow
自动将 nofollow 相关属性 rel="external nofollow" target="_blank"
添加到文章中的外部链接,可以设置白名单
安装
npm install hexo-autonofollow --save
hexo-filter-nofollow
https://github.com/hexojs/hexo-filter-nofollow
自动将 nofollow 相关属性 rel="noopener external nofollow noreferrer"
,可以设置白名单
安装
npm i hexo-filter-nofollow --save
###
hexo-abbrlink2
https://github.com/rozbo/hexo-abbrlink2
自动生成 url ,自动以 ID(数字) 递增,但是如果修改文件名会重新创建。
配置
permalink: posts/:abbrlink/
扩展配置
abbrlink:
start: 1000 # 从多少开始,默认从 0 开始
生成演示
https://post.zz173.com/posts/1.html
https://post.zz173.com/posts/2.html
https://post.zz173.com/posts/3.html
hexo-abbrlink
https://github.com/rozbo/hexo-abbrlink
自动生成短链接,根据 crc16 或者 crc32 随机生成链接。
hexo-generator-random
https://github.com/Drew233/hexo-generator-random
随机打开一篇文章
插件必须依赖(前3个hexo一般已经集成)
- minimatch
- path
- fs
- object-assign
hexo-sitemap-generator
- https://www.npmjs.com/package/hexo-sitemap-generator
安装
npm install hexo-sitemap-generator --save
在根目录 _config.yml 文件配置插件
sitemaps:
path:
- sitemap.xml
- sitemap.txt
- sitemap.html
# template: ./sitemap_template.xml
# template_txt: ./sitemap_template.txt
# template_html: ./sitemap_template.html
rel: false
tags: true
categories: true
内容禁止添加到 sitemap 在内容 front matter 添加 sitemap: false
title: 页面找不到
sitemap: false
hexo-generator-alias
- https://www.npmjs.com/package/hexo-generator-alias
安装
npm install hexo-generator-alias --save
根目录 _config.yml 文件配置指定页面URL的跳转
alias:
about-page/index.html: about/
site/github.html: https://github.com/
多个页面URL跳转到当前页面URL,配置 alias
---
title: 当前页面
alias: foo/index.html # 一个
alias: # 多个
- foo/index.html
- bar/index.html
---
当前页面跳转到其他页面,配置 redirect
---
title: 当前页面
redirect: http://1px.run/
---
主题
icarus
Icarus提供如下的内置CDN服务提供商:
- JavaScript库CDN
- cdnjs.com 「5.1.0 实际用的是 https://cdnjs.cloudflare.com/ 」 (cdnjs)
- jsDelivr (jsdelivr)
- UNPKG (unpkg)
- loli.net (loli)
- Web字体CDN
- Google Fonts (google)
- loli.net (loli)
- font.im (fontim)
- 中国科学技术大学 (ustc)
- FontAwesome图标CDN
- FontAwesome 5 (fontawesome)
- loli.net (loli)
文章
发布时间
<%= date(post.date, 'YYYY-MM-DD H:m') %>
更新时间
<%= date(post.updated, 'YYYY-MM-DD H:m') %>
摘要
直接读取摘要,部分内容可能会导致布局错乱
核心代码:第2行
<% if (post.excerpt && index){ %>
<%- post.excerpt %>
<% if (theme.excerpt_link){ %>
<p class="article-more-link">
<a href="<%- url_for(post.path) %>#more"><%= theme.excerpt_link %></a>
</p>
<% } %>
<% } else { %>
<!-- 其他状态 -->
<% } %>
【好像会报错,还需验证】读取摘要时格式化内容,并限定字数
核心代码:第2行
<% if (post.excerpt && index){ %>
<p><%- truncate(strip_html(article.excerpt || article.content ), {length: 140}) %></p>
<% if (theme.excerpt_link){ %>
<p class="article-more-link">
<a href="<%- url_for(post.path) %>#more"><%= theme.excerpt_link %></a>
</p>
<% } %>
<% } else { %>
<!-- 其他状态 -->
<% } %>
调取自定义字段
<% if (post.siteurl){ %>
有<%= post.siteurl %>显示siteurl值
<% } else { %>
没有就显示其他这个
<% } %>
判断
<% if (post.indexfocus){ %>
文章配置indexfocus为true显示
<% } %>
页面判断
<% if (is_post()){ %>
<a class="<%= class_name %>" href="<%- url_for(post.path) %>" id="logo"><%= post.title %></a>文章、独立页面显示这里
<% } else { %>
<a href="<%- url_for() %>" id="logo"><%= config.title %></a>
其他页面显示这里
<% } %>
hexo 搜索
主题修改
常用模板函数
<%- url_for() %>
网站地址 <%= config.title %>
网站名称 有副标题显示副标题
<% if (theme.subtitle){ %>
<%= theme.subtitle %>
<% } %>
有rss就显示rss链接
<% if (theme.rss){ %>
<a id="nav-rss-link" class="nav-icon" href="<%- url_for(theme.rss) %>" title="<%= __('rss_feed') %>"></a>
<% } %>
列表函数配置方法举例 show_count使用模板函数,class使用输入值,相关配置值https://hexo.io/zh-cn/docs/helpers.html
<%- list_categories({show_count: theme.show_count, class: 'clearfix'}) %>
不同页面分别显示对应标题或者文字内容 配置
<%
var pagetitle = page.title;
if (is_archive()){
pagetitle = __('archive_a');
if (is_month()){
pagetitle += ': ' + page.year + '年' + page.month + '月发布的文章';
} else if (is_year()){
pagetitle += ': ' + page.year + '年发布的文章';
}
} else if (is_category()){
pagetitle = page.category;
} else if (is_tag()){
pagetitle = page.tag;
} else if (is_home()){
pagetitle = config.subtitle;
}
%>
使用<h2><%= pagetitle %></h2>
输出分类列表
<% if (site.categories.length){ %>
<% site.categories.sort('name').each(function(item){ %>
<a class="main-nav-link nav-<%=item.slug%>" href="<%= url_for(item.path) %>">
<strong class='name'><%= item.name %></strong>
<span class='badget'><%= item.posts.length %></span>
</a>
<% }); %>
<% } %>
只在首页显示
方法一
<% if (is_home()){ %>
<!-- 这里写要在首页显示的内容 -->
<% } %>
方法二
<% if (index){ %>
<!-- 这里写要在首页显示的内容 -->
<% } %>
不在首页显示
<% if (!index){ %>
这个不在首页显示
<% } %>
开启代码高亮
http://jamling.github.io/2016/07/18/Web/Hexo-dev-highlight/
hexo 升级教程
https://cco.xyz/post/upgrade-hexo/
升级hexo
检查版本npm outdated
,如果没有输出内容表示当前为最新版
指定版本,修改package.json
文件中dependencies
部分对应版本号
执行更新命令npm install --save
更新完成后执行当前版本命令hexo version
,确认更新结果
升级npm
更新 npm 版本npm install npm@latest -g
如果报错请使用root模式sudo -i
hexo 及 npm 管理
查看插件列表npm list
卸载指定插件npm uninstall hexo-qiniu-sync@1.4.7
删除文件夹rm -rf
列出网站资料hexo list
显示草稿hexo --draft
相关教程
- 使用LeanCloud平台为Hexo博客添加文章浏览量统计组件
- Hexo添加字数统计、阅读时长
- Hexo搭建Github-Pages博客填坑教程
- hexo常用命令笔记
- 自定义Hexo博客的文章模板
- Hexo自定义页面的方法
- hexo安装与卸载插件
- 在 Hexo 中创建匹配主题的404页面
- Hexo Docs(三)- 高级进阶 - 简书
- 辅助函数(Helpers)