mycpen

Mycpen

记录学习历程与受益知识
github
telegram
bilibili

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

Hexo 搭建私人博客#

一。介绍#

1.1 Hexo#

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

1.2 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

搭建 & 魔改#


三。命令#

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/ 评论区通过密文,识别博主身份


五。相关路径#

[文章路径]: 
	\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行"

六。内容样例#

---
title: Test
date: 2022-08-28 00:09:00
updated: 2022-08-28 00:09:01
thumbnail: https://image.cpen.top/image/test.png
tags:
    - Test
category:
    - Test
toc: true
top: true
---
描述<!-- more -->

文章指定多个 category#

多个分类

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

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 行,修改限制

image-20220830075511578

image-20220830075224471

image-20220830075722865

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

a 标签,修改 target: '_blank' → '_self'

image-20220830080811356

image-20220830080916410

image-20220830080945424


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

image-20220906033013691


7.4 滚动条加粗 + 加小箭头#

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

    1. Ctlrl + F 定位 scrollbar

    2. 调高 height,使代码框 右拉滚动条加粗;

    3. 右侧下拉条变粗;

    7.4.1 代码框加粗

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

    image-20220901164700329

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

    /*
     * 滚动条箭头							
     */
    ::-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;
    }
    

    image-20220901164914382

参考文章

7.5 Valine 评论框添加一言#

参考文章

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

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

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

        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. 在内部添加一段代码:

    <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 左侧 归档、分类 改为默认收起#

  • 默认是展开的

image-20220901203849607

image-20220901203907981

  • 修改以下文件,改为收起状态。如图
    • style="height: 0px" 应该可以不用写,收起状态默认就是 0 ~~

.\themes\pure\layout\categories.ejs

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

image-20220901203746673

image-20220901203807739


八。未解决的小需求#

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

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

    我的

    image-20220901171817579

    其他大佬的

    image-20220901171912131

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

    image-20220901172133945

    image-20220901172316157

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

    image-20220901175404486

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

    理想效果图

    image-20220906034109271

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

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

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

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


加载中...
此文章数据所有权由区块链加密技术和智能合约保障仅归创作者所有。