hexo 个人博客搭建

博客搭建

环境配置

Windows

1. 安装 git

   1. 安装包：
      • 官方：https://gitforwindows.org/
      • 国内镜像站：https://npm.taobao.org/mirrors/git-for-windows/
   2. 教程：https://www.cnblogs.com/jytx/p/5602927.html（他写的挺详细的，我就不写了）

2. 安装 nodejs

   

3. 检验安装是否成功

   打开 git bash

   node -v
   npm -v

   

   如果出现报错

   npm WARN config global `--global`, `--local` are deprecated. Use `--location=global` instead.

   解决方法

   1. 打开node.js安装目录那里，找到npm.cmd文件

4. 将文件里的prefix-g 改为 prefix --location=global

   1. 另存到其他地方，然后再复制过来覆盖掉

1. 使用国内镜像加速

   打开 cmd 输入

   npm config set registry https://registry.npm.taobao.org

   安装 cpm

   npm install -g cnpm --registry=https://registry.npmmirror.com

1. 注册 Github 账号

2. 创建 git 仓库

3. 安装 Hexo

   选择一个磁盘，新建一个文件夹用来存放博客文件。比如我的（E/Blog），在该文件夹下右键单击鼠标，点击 Git Bash Here，输入以下 npm 命令即可安装

   cnpm install hexo-cli -g

   安装完成后输入hexo -v

4. Hexo 初始化

   在 Git Bash Here中输入

   hexo init
   cnpm install

   

文章编写

文章 Front-matter 介绍

Front-matter 选项详解

Front-matter 选项中的所有内容均为非必填的。但我仍然建议至少填写 title 和 date 的值。

配置选项	默认值	描述
title	Markdown 的文件标题	文章标题，强烈建议填写此选项
date	文件创建时的日期时间	发布时间，强烈建议填写此选项，且最好保证全局唯一
author	根 _config.yml 中的 author	文章作者
img	featureImages 中的某个值	文章特征图，推荐使用图床(腾讯云、七牛云、又拍云等)来做图片的路径.如: http://xxx.com/xxx.jpg
top	true	推荐文章（文章是否置顶），如果 top 值为 true，则会作为首页推荐文章
hide	false	隐藏文章，如果hide值为true，则文章不会在首页显示
cover	false	v1.0.2版本新增，表示该文章是否需要加入到首页轮播封面中
coverImg	无	v1.0.2版本新增，表示该文章在首页轮播封面需要显示的图片路径，如果没有，则默认使用文章的特色图片
password	无	文章阅读密码，如果要对文章设置阅读验证密码的话，就可以设置 password 的值，该值必须是用 SHA256 加密后的密码，防止被他人识破。前提是在主题的 config.yml 中激活了 verifyPassword 选项
toc	true	是否开启 TOC，可以针对某篇文章单独关闭 TOC 的功能。前提是在主题的 config.yml 中激活了 toc 选项
mathjax	false	是否开启数学公式支持 ，本文章是否开启 mathjax，且需要在主题的 _config.yml 文件中也需要开启才行
summary	无	文章摘要，自定义的文章摘要内容，如果这个属性有值，文章卡片摘要就显示这段文字，否则程序会自动截取文章的部分内容作为摘要
categories	无	文章分类，本主题的分类表示宏观上大的分类，只建议一篇文章一个分类
tags	无	文章标签，一篇文章可以多个标签
keywords	文章标题	文章关键字，SEO 时需要
reprintPolicy	cc_by	文章转载规则， 可以是 cc_by, cc_by_nd, cc_by_sa, cc_by_nc, cc_by_nc_nd, cc_by_nc_sa, cc0, noreprint 或 pay 中的一个

注意:

1. 如果 img 属性不填写的话，文章特色图会根据文章标题的 hashcode 的值取余，然后选取主题中对应的特色图片，从而达到让所有文章的特色图各有特色。
2. date 的值尽量保证每篇文章是唯一的，因为本主题中 Gitalk 和 Gitment 识别 id 是通过 date 的值来作为唯一标识的。
3. 如果要对文章设置阅读验证密码的功能，不仅要在 Front-matter 中设置采用了 SHA256 加密的 password 的值，还需要在主题的 _config.yml 中激活了配置。有些在线的 SHA256 加密的地址，可供你使用：开源中国在线工具、chahuo、站长工具。
4. 您可以在文章md文件的 front-matter 中指定 reprintPolicy 来给单个文章配置转载规则

以下为文章的 Front-matter 示例。

最简示例

---
title: typora-vue-theme主题介绍
date: 2018-09-07 09:25:00
---

最全示例

---
title: typora-vue-theme主题介绍
date: 2018-09-07 09:25:00
author: 赵奇
img: /source/images/xxx.jpg
top: true
hide: false
cover: true
coverImg: /images/1.jpg
password: 8d969eef6ecad3c29a3a629280e686cf0c3f5d5a86aff3ca12020c923adc6c92
toc: false
mathjax: false
summary: 这是你自定义的文章摘要内容，如果这个属性有值，文章卡片摘要就显示这段文字，否则程序会自动截取文章的部分内容作为摘要
updated: 2024-05-08 17:55:40
categories: Markdown
tags:
  - Typora
  - Markdown
---

博客美化

浏览器网页标题

效果图

1.

2.

1.在\themes\material-x\source\js下新建一个 FunnyTitle.js 文件，填写如下代码：

// 浏览器搞笑标题
var OriginTitle = document.title;
var titleTime;
document.addEventListener('visibilitychange', function () {
    if (document.hidden) {
        $('[rel="icon"]').attr('href', "/funny.ico");
        document.title = '╭(°A°`)╮ 页面崩溃啦 ~';
        clearTimeout(titleTime);
    }
    else {
        $('[rel="icon"]').attr('href', "/favicon.ico");
        document.title = '(ฅ>ω<*ฅ) 噫又好啦 ~' + OriginTitle;
        titleTime = setTimeout(function () {
            document.title = OriginTitle;
        }, 2000);
    }
});

2.在 \themes\material-x\layout\layout.ejs文件中的下列位置插入代码：

<!--浏览器搞笑标题-->
<script type="text/javascript" src="/js/FunnyTitle.js"></script>

图床

hexo 功能添加及优化

hexo 相关问题