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 的值。

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


评论
  目录