01_Hexo-Hexo + Pure搭建博客-自定义

:点击此处或下方 以展开或折叠目录

Hexo 搭建私人博客

一. 介绍

1.1 Hexo

Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown(或其他渲染引擎)解析文章,在几秒内,即可利用靓丽的主题生成静态网页。Hexo 官网

1.2 Pure 主题

https://github.com/cofess/hexo-theme-pure

https://blog.cofess.com/


二. 参考

Hexo 官网 https://hexo.io/zh-cn/docs/index.html

Pure 项目地址 https://github.com/cofess/hexo-theme-pure/blob/master/README.cn.md

搭建 & 魔改


三. 命令

1
hexo clean ; hexo g ; hexo d ; hexo s

四. 评论 & 收录

Valine 评论 https://www.leancloud.cn/

Valine 评论 https://www.leancloud.app/ 国外站点,国内账号受限,域名没白嫖成功,可能是这个原因 → https://forum.leancloud.cn/t/2022-8/25408

谷歌收录 https://search.google.com/search-console

百度收录 https://ziyuan.baidu.com

MD5 在线加密 https://md5jiami.bmcx.com/ 评论区通过密文,识别博主身份


五. 相关路径

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
[文章路径]: 
\source\_posts
[站点配置文件]:
\_config.yml
[主题配置文件]:
\themes\pure\_config.yml "关于、个人介绍、公告"
[友链文件]:
\source\_data\links.yml
[语言]:
\themes\pure\languages
[左下角运行时间]:
\themes\pure\layout\_common\footer.ejs "时间、版权"
[评论角色配置]:
\themes\pure\layout\_script\_comment\valine.ejs
[css样式]:
\themes\pure\source\css\style.css
[搜索栏限制]:
\themes\pure\source\js\insight.js "160行"

六. 内容样例

1
2
3
4
5
6
7
8
9
10
11
12
13
---
title: Test
date: 2022-08-28 00:09:00
updated: 2022-08-28 00:09:01
thumbnail: https://open.lightxi.com/unpkg/mycpen-image-bed@0.0.0-fjdvcnudgw/image/test.png
tags:
- Test
category:
- Test
toc: true
top: true
---
描述<!-- more -->

文章指定多个 category

多个分类

如果我们的要求是将文章同时分到两个或者多个不同的类目下呢?官方给出的方法是:

1
2
3
categories:
- [Sports]
- [Baseball]

参考文章:Hexo 一篇文章多个 categories https://www.jianshu.com/p/4438c417611e


七. 自定义

7.1 搜索框索引突破 5

  1. F12 定位到搜索框的 类选择器 为 ins-section-header

  2. grep,定位到配置文件为 \themes\pure\source\js\insight.js

  3. Ctrl + F,搜索 5,定位到第 160 行,修改限制

7.2 左侧头像链接,target 修改为 _self

a 标签,修改 target: ‘_blank’ → ‘_self’


7.3 文章目录,一级标题不跳转

有时发现一级标题不会跳转

配置文件 \node_modules\hexo\lib\plugins\helper\toc.js

更新下 \node_modules\hexo\lib\plugins\helper\toc.js 文件,又正常了。时灵时不灵的。。。

参考 https://hwame.top/如何取消文章目录的自动编号

修改 “.\node_modules\hexo-renderer-markdown-it\index.js” level 为 1


7.4 滚动条加粗 + 加小箭头

  • 修改 css 样式,路径 .\hexo-source\themes\pure\source\css\style.css

    1. Ctlrl + F 定位 scrollbar
    2. 调高 height,使代码框 右拉滚动条加粗;
    3. 右侧下拉条变粗;

    7.4.1 代码框加粗

    1
    2
    3
    4
    5
    6
    7
    8
    9
    /*
    * scrollbar
    */

    ::-webkit-scrollbar {
    width: 15px;
    height: 14px; # 调高
    background: transparent;
    }

    7.4.2 右侧下拉条变粗 + 添加小箭头

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    /*
    * 滚动条箭头
    */
    ::-webkit-scrollbar-button {
    width: 0px;
    height: 4px;
    display: block;
    background-color: #c3c3c3;
    }
    ::-webkit-scrollbar {
    width: 16px;
    border: 5px solid white;

    }

    ::-webkit-scrollbar-thumb {
    background-color: #b0b0b0;
    background-clip: padding-box;
    border: 0.05em solid #eeeeee;
    }

    ::-webkit-scrollbar-track {
    background-color: #bbbbbb;
    }
    /* Buttons */
    ::-webkit-scrollbar-button:single-button {
    background-color: #bbbbbb;
    display: block;
    border-style: solid;
    height: 13px;
    width: 16px;
    }
    /* Up */
    ::-webkit-scrollbar-button:single-button:vertical:decrement {
    border-width: 0px 8px 8px 8px;
    border-color: transparent transparent #555555 transparent;
    }

    ::-webkit-scrollbar-button:single-button:vertical:decrement:hover {
    border-color: transparent transparent #777777 transparent;
    }
    /* Down */
    ::-webkit-scrollbar-button:single-button:vertical:increment {
    border-width: 8px 8px 0 8px;
    border-color: #555555 transparent transparent transparent;
    }

    ::-webkit-scrollbar-button:vertical:single-button:increment:hover {
    border-color: #777777 transparent transparent transparent;
    }

参考文章

7.5 Valine 评论框添加一言

参考文章

偶然看到的文章,然后自己就加了这个功能。

  • 路径:.\themes\pure\layout\_script\_comment\valine.ejs

  • 加到最后 </script> 标签之前;c=j 请求获得网易云的句子,开始网抑云吧;

    1
    2
    3
    4
    5
    6
    fetch('https://v1.hitokoto.cn/?c=j')
    .then(response => response.json())
    .then(data => {
    document.getElementById("veditor").setAttribute("placeholder",data.hitokoto+"__"+data.from);
    })
    .catch(console.error)

修改方法:

  1. 找到博客对应添加valine的位置,例如Ayer主题的位于hexo\themes\ayer\layout_partial\post\valine.ejs

  2. 在内部添加一段代码:

    1
    2
    3
    4
    5
    6
    7
    8
    <script type="text/javascript">
    fetch('https://v1.hitokoto.cn')
    .then(response => response.json())
    .then(data => {
    document.getElementById("veditor").setAttribute("placeholder",data.hitokoto+"__"+data.from);
    })
    .catch(console.error)
    </script>
  3. Api接口说明:
    (1)https://v1.hitokoto.cn/ (从7种分类中随机抽取)
    (2)https://v1.hitokoto.cn/?c=b (请求获得一个分类是漫画的句子)
    参数 说明
    a 动画
    b 漫画
    c 游戏
    d 文学
    e 原创
    f 来自网络
    g 其他
    h 影视
    i 诗词
    j 网易云
    k 哲学
    l 抖机灵
    其他 作为动画类型处理
    可选择多个分类,例如: ?c=a&c=c

(3)https://v1.hitokoto.cn/?c=f&encode=text (请求获得一个来自网络的句子,并以纯文本格式输出)

  1. 返回的格式说明
    返回参数名称 描述
    id 一言标识
    hitokoto 一言正文。编码方式 unicode。使用 utf-8。
    type 类型
    from 一言的出处
    from_who 一言的作者
    creator 添加者
    creator_uid 添加者用户标识
    reviewer 审核员标识
    uuid 一言唯一标识;可以链接到 https://hitokoto.cn?uuid=[uuid] 查看这个一言的完整信息
    commit_from 提交方式
    created_at 添加时间
    length 句子长度
    例如:返回的data,通过data.hitokoto获取句子正文

作者: Justlovesmile
链接: https://blog.justlovesmile.top/posts/27831.html
来源: Justlovesmile’s BLOG
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

PS:这位大佬的博客真好看~~

7.6 左侧 归档、分类 改为默认收起

  • 默认是展开的

  • 修改以下文件,改为收起状态。如图

    • style=“height: 0px” 应该可以不用写,收起状态默认就是 0 ~~

.\themes\pure\layout\categories.ejs

.\themes\pure\layout\_partial\archive.ejs


八. 未解决的小需求

  1. (已解决,#7.3)一级目录,右侧导航栏 有时跳转失败;

  2. Valine 评论系统,下面的评论 被@后,未显示 @信息,而别人的是成功的;

    我的

    其他大佬的

  3. 引用时 使用 #,会被导航目录误认为 一级标题;

  4. (已解决)生成在 /public 目录的静态文件都被压缩了,我看别人的没被压缩,不清楚啥原因。 因为配置了这个 https://github.com/cofess/hexo-theme-pure/blob/master/README.cn.md 博客优化 压缩了文件

  5. (已解决)文章内部一级、二级…标题左侧无锚点

    理想效果图

    似乎是环境配置问题,我用虚拟机推送静态文件,就有显示;用真实 win机 推送 就没有锚点,重装 git 也没显示(可能不是 git 的问题)。。。

    因为压缩了静态文件,全部注释 hexo-neat 配置。
    参考
    https://github.com/cofess/hexo-theme-pure#hexo-neat
    https://github.com/rozbo/hexo-neat#options

无伤大雅,我一般一级标题写的是文章标题;评论区也就是个摆设;静态文件被压缩,可能别人还觉得我是故意,嘿~~

最后总结:魔改要适量,太费时 还得不到提升,不如多看几个前端视频 多写几篇文章。。。