hexo 个人博客搭建



博客搭建

环境配置

Windows

  1. 安装 git

    1. 安装包:
    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 选项中的所有内容均为非必填的。但我仍然建议至少填写 titledate 的值。

配置选项 默认值 描述
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 的值尽量保证每篇文章是唯一的,因为本主题中 GitalkGitment 识别 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 相关问题


如果本文帮助到了你,帮我点个广告可以咩(o′┏▽┓`o)


评论
  目录