Hexo博客重新部署与Git配置

news2024/10/6 0:35:36

由于电脑重装了一次，发现之前Hexo与NexT主题版本过于落后，重新部署了下。

1 Node.js与git安装

这一块安装就不赘述了。去两个官网找安装文件安装即可。

node.js

git

打开git以后配置的几个关键命令行。

git config --global user.name "你的github名字"
git config --global user.email "你的邮箱地址"

生成ssh密钥，根据地址找到ssh密钥文件，用记事本打开。

ssh-keygen -t rsa -C "你的邮箱地址"
根据上面然后在自己的github账户上设置中进行上传密钥。

关于安装成功测试，可以输入以下几个命令。

node -v
npm -v

关于重新部署的原因，最早是安装一些插件报了错。

后面虽然有一些参考资料的语句是有用的，但是整体还是因为比较古老的版本各种bug，于是痛定思痛决定重新部署。

2 Hexo与NexT主题安装

Hexo的博客我前面写过很多了，有兴趣大家可以移步前面。这里主要讲最新的几个安装步骤。首先给出官网文档。

Hexo

npm install hexo-cli -g
hexo init blog
cd blog
npm install
hexo server

相关hexo主题。

Hexo可选主题

我还是选择老朋友NexT主题。

NexT官方仓库

NexT官方文档

cd "你的博客根目录"
npm install hexo-theme-next

hexo server

显示NexT版本。

然后安装部分插件。

npm install hexo-tag-cloud@^2.0.* --save
npm install --save hexo-tag-aplayer
npm install hexo-tag-dplayer --save
npm install --save hexo-pdf
npm install --save hexo-admin-qiniu
npm install hexo-generator-searchdb
npm install hexo-filter-mathjax
npm install hexo-word-counter
npm install hexo-related-posts
npm install next-theme/hexo-next-valine

从git上clone下next主题，修改配置文件。

git clone https://github.com/next-theme/hexo-theme-next themes/next

Hexo配置主题的本质就是有两个_config.yml，一个是根目录下的，一个是主题文件下的。根据这两个进行不同的修改。

  • 数学公式启用
  • busuanzi访客统计插件配置
  • 本地搜索插件配置
  • 进度条配置
  • 相关文章配置

相关配置文档和仓库：

  • awesome next
  • hexo word counter
  • hexo next valine

配置过程中的几个注意事项。valine出现了一个报错是“Cannot read property ‘enable_sync’ of undefined”，后面发现需要在根目录的配置文件添加如下的命令即可正常运行。

关于配置valine评论系统时报了401的错误。且以前的评论不显示。需要配置serverURLs。具体配置可以见参考资料的内容，这里不赘述了。

3 自定义的一些插件

3.1 页脚修改

这个地方主要是修改了下访客数量和访问总量那两部分中文。打开theme/next/layout/_partials/footer.njk文件。在画圈部分加上中文即可。

效果图。

3.2 侧边栏插入访客可视化、词云、建站时间以及最近推送文章

这些插件主要实现方式是，在根目录/source下建立一个新的文件夹_data，然后新建一个sidebar.njk的新文件并输入如下的代码。

<div id="days"></div>
</script>
<script language="javascript">
function show_date_time(){
window.setTimeout("show_date_time()", 1000);
BirthDay=new Date("你的建站时间");
today=new Date();
timeold=(today.getTime()-BirthDay.getTime());
sectimeold=timeold/1000
secondsold=Math.floor(sectimeold);
msPerDay=24*60*60*1000
e_daysold=timeold/msPerDay
daysold=Math.floor(e_daysold);
e_hrsold=(e_daysold-daysold)*24;
hrsold=setzero(Math.floor(e_hrsold));
e_minsold=(e_hrsold-hrsold)*60;
minsold=setzero(Math.floor((e_hrsold-hrsold)*60));
seconds=setzero(Math.floor((e_minsold-minsold)*60));
document.getElementById('days').innerHTML="已运行"+daysold+"天"+hrsold+"小时"+minsold+"分"+seconds+"秒";
}
function setzero(i){
if (i<10)
{i="0" + i};
return i;
}
show_date_time();
</script>
<script type="text/javascript" id="clstr_globe" src="//cdn.clustrmaps.com/globe.js?d=你自己的数字"></script>

{% if site.tags.length > 1 %}
  <script type="text/javascript" charset="utf-8" src="{{ url_for('/js/tagcloud.js') }}"></script>
  <script type="text/javascript" charset="utf-8" src="{{ url_for('/js/tagcanvas.js') }}"></script>
  <div class="widget-wrap">
    <h3 class="widget-title">Tag Cloud</h3>
    <div id="myCanvasContainer" class="widget tagcloud">
      <canvas width="250" height="250" id="resCanvas" style="width:100%">
        {{ list_tags() }}
      </canvas>
    </div>
  </div>
{% endif %}

{%- if theme.recent_posts %}
  <div class="links-of-recent-posts motion-element">
    <div class="links-of-recent-posts-title">
      {%- if theme.recent_posts.icon %}
      <i class="{{ theme.recent_posts.icon }} fa-fw"></i>
      {%- endif %}
      {{ theme.recent_posts.title }}
    </div>
    <ul class="links-of-recent-posts-list">
      {%- set posts = site.posts.sort('date', 'desc').toArray() %}
      {%- for post in posts.slice('0', theme.recent_posts.max_count) %}
        <li class="links-of-recent-posts-item">
          {{ next_url(post.path, post.title, {title: post.path}) }}
        </li>
      {%- endfor %}
    </ul>
  </div>
{%- endif %}

另外在NexT主题的配置文件中也要修改下。

访客可视化以及建站时间效果。

文章标签词云以及最近推送文章效果。

3.3 背景图的替换以及下方背景色块设置

同样需要在根目录/source/_data下新建一个style.styl的新文件并输入如下的代码。

#days {
    display: block;
    color: rgb(7, 179, 155);
    font-size: 13px;
    margin-top: 15px;
}
body {
      background: url(http://media.gisersqdai.top/snzs.jpg);
      background-size: cover;
      background-repeat: no-repeat;
      background-attachment: fixed;
      background-position: 50% 50%;
}
// 页面底部页脚
.footer {
    line-height: 1.5;
    background-color: rgba(255, 255, 255, 0.75);
    color: #333;
    border-top-width: 3px;
    border-top-style: solid;
    border-top-color: rgb(161, 102, 171);
    box-shadow: 0px -10px 10px 0px rgba(0, 0, 0, 0.15);
}
// 选中文字部分的样式
::selection {
    background-color: rgb(255, 241, 89);
    color: #555;
}

.links-of-recent-posts
  font-size: 0.8125em
  margin-top: 10px

.links-of-recent-posts-title
  font-size: 1.03em
  font-weight: 600
  margin-top: 0

.links-of-recent-posts-list
  list-style: none
  margin: 0
  padding: 0

也需要在NexT配置文件中修改。

背景色块效果。

3.4 Daovoice

增加一个Daovoice支持的聊天界面。daovoice控制台。在next/layout/_partials/head/head.njk文件中加入如下代码。

{% if theme.daovoice %}
  <script>
  (function(i,s,o,g,r,a,m){i["DaoVoiceObject"]=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;a.charset="utf-8";m.parentNode.insertBefore(a,m)})(window,document,"script",('https:' == document.location.protocol ? 'https:' : 'http:') + "//widget.daovoice.io/widget/0f81ff2f.js","daovoice")
  daovoice('init', {
      app_id: "{{theme.daovoice_app_id}}"
    });
  daovoice('update');
  </script>
{% endif %}

NexT配置文件中增加。

效果图。

参考资料:

  • 【Git】保姆级详解：Git配置SSH Key（密钥和公钥）到github
  • git设置SSH密钥
  • “Cannot read property ‘match’ of undefined” during Npm install
  • “internal/modules/cjs/loader.js:582 throw err”
  • nodejs 报错 Error: EPERM: operation not permitted,mkdir‘xxxxxxxxxxxxxxxx‘
  • Cannot read property ‘enable_sync’ of undefined
  • 解决Valine评论不显示的问题
  • 【解决方法】Valine评论不显示
  • Valine评论异常解决
  • 为博客新增评论系统
  • Next主题设置-安装Valine和Artitalk
  • hexo d命令报错 ERROR Deployer not found: git
  • Hexo主题中添加日历云功能
  • hexo next主题添加日历云
  • Hexo日历插件
  • Hexo x NexT - 顯示最新文章、導入Google Analytics 的坑
  • Hexo-NexT 设置近期文章
  • hexo next主题添加日历云
  • Hexo日历插件
  • 迎来船新版本的Hexo+NexT
  • 个人blog搭建指南github pages和hexo-theme-next
  • 【目录】Hexo+NexT+Gemini 搭建博客拥抱舒爽

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1669324.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

langchain 自定义模型使用

langchain 自定义模型使用

目录 背景 参考 实现 调用 背景 在公司有大模型可以通过 api 方式调用&#xff0c;想使用 langchain 框架调用&#xff0c;langchina 已经封装好大部分模型了&#xff0c;但自己公司的模型不支持&#xff0c;想使用&#xff0c;相当于自定义模型 参考 Custom Chat Model …
阅读更多...
基于Springboot的家教管理系统（有报告）。Javaee项目，springboot项目。

基于Springboot的家教管理系统（有报告）。Javaee项目，springboot项目。

演示视频&#xff1a; 基于Springboot的家教管理系统&#xff08;有报告&#xff09;。Javaee项目&#xff0c;springboot项目。 项目介绍&#xff1a; 采用M&#xff08;model&#xff09;V&#xff08;view&#xff09;C&#xff08;controller&#xff09;三层体系结构&…
阅读更多...
Idea插件Easy-Code模板文件

Idea插件Easy-Code模板文件

目录 需要引入的依赖application.yml.vmapplication-dev.yml.vmresult.java.vm (统一返回集)resultCodeEnum.java.vm &#xff08;统一返回集需要的枚举类&#xff09;globalCorsConfig.java.vm &#xff08;全局跨域处理&#xff09;entity.java.vm &#xff08;实体类&#x…
阅读更多...
【科研绘图 基础版】01 使用Python绘制时间序列折线图

【科研绘图 基础版】01 使用Python绘制时间序列折线图

下面这段代码绘制了一个折线图&#xff0c;其中包含了实际平均温度数据和使用线性回归模型预测的平均温度数据&#xff08;用来近似地表示数据的整体趋势&#xff09;。 具体来说&#xff0c;图中的横轴表示年份&#xff0c;纵轴表示平均温度。蓝色的实心线代表了实际的平均温度…
阅读更多...
【Mac】Perfectly Clear Workbench（智能图像清晰修复软件）安装教程

【Mac】Perfectly Clear Workbench（智能图像清晰修复软件）安装教程

软件介绍 Perfectly Clear Workbench是由Athentech Imaging开发的一款图像处理软件&#xff0c;旨在帮助用户快速、轻松地优化和改善数字照片的质量。以下是Perfectly Clear Workbench的一些主要特点和功能&#xff1a; 1.自动图像优化 该软件采用先进的图像处理算法&#xf…
阅读更多...
StarRocks 【新一代MPP数据库】

StarRocks 【新一代MPP数据库】

1、StarRocks 1.1、StarRocks 简介 StarRocks 是新一代极速全场景 MPP (Massively Parallel Processing&#xff0c;MPP数据库是一种基于大规模并行处理技术的数据库系统&#xff0c;旨在高效处理大量数据。) 数据库。StarRocks 的愿景是能够让用户的数据分析变得更加简单和敏…
阅读更多...
设计模式：迭代器模式（Iterator）

设计模式：迭代器模式（Iterator）

设计模式&#xff1a;迭代器模式&#xff08;Iterator&#xff09; 设计模式&#xff1a;迭代器模式&#xff08;Iterator&#xff09;模式动机模式定义模式结构时序图模式实现在单线程环境下的测试在多线程环境下的测试模式分析优缺点适用场景应用场景参考 设计模式&#xff1…
阅读更多...
第五百回 Get路由管理

第五百回 Get路由管理

文章目录 1. 概念介绍2. 使用方法2.1 普通路由2.2 命名路由 3. 示例代码4. 内容总结 我们在上一章回中介绍了"使用get显示Dialog"相关的内容&#xff0c;本章回中将介绍使用get进行路由管理.闲话休提&#xff0c;让我们一起Talk Flutter吧。 1. 概念介绍 我们在本章…
阅读更多...
什么是分库分表

什么是分库分表

读写分离主要应对的是数据库读并发&#xff0c;没有解决数据库存储问题。试想一下&#xff1a;如果 MySQL 一张表的数据量过大怎么办? 答案当然是分库分表 什么是分库&#xff1f; 分库 就是将数据库中的数据分散到不同的数据库上&#xff0c;可以垂直分库&#xff0c;也可…
阅读更多...
一二三应用开发平台使用手册——系统管理-系统参数系统日志-使用说明

一二三应用开发平台使用手册——系统管理-系统参数系统日志-使用说明

系统参数 概述 通过配置化&#xff0c;可以提升系统灵活性和运维便利性。 配置化往往分为两大类&#xff0c;一类是偏技术层面的&#xff0c;如平台的发送邮件提醒的邮箱&#xff0c;相对固化&#xff0c;不会频繁调整&#xff0c;一般放在系统的配置文件里&#xff0c;如spr…
阅读更多...
目标检测——印度车辆数据集

目标检测——印度车辆数据集

引言 亲爱的读者们&#xff0c;您是否在寻找某个特定的数据集&#xff0c;用于研究或项目实践&#xff1f;欢迎您在评论区留言&#xff0c;或者通过公众号私信告诉我&#xff0c;您想要的数据集的类型主题。小编会竭尽全力为您寻找&#xff0c;并在找到后第一时间与您分享。 …
阅读更多...
MySQL前缀索引、脏页和干净页、COUNT(*)讨论、表删除内存问题

MySQL前缀索引、脏页和干净页、COUNT(*)讨论、表删除内存问题

文章目录 如何加索引如何给身份证号添加索引 SQL语句变慢脏页 (Dirty Pages)干净页 (Clean Pages)为何区分脏页和干净页处理脏页管理策略 flush如何控制 为什么删除表数据后表文件大小不变问题背景核心原因数据存储方式参数影响 解决方案1. 调整innodb_file_per_table设置2. 使…
阅读更多...
2.4 输入和显示

2.4 输入和显示

本节必须掌握的知识点&#xff1a; 示例五源代码 代码分析 汇编解析 2.4.1 示例五 ■格式化输入函数scanf scanf函数可以从键盘读取输入的信息。scanf函数同样可以像printf函数那样&#xff0c;通过转换说明“%d”来限制函数只能读取十进制数。scanf函数的参数为可变参数…
阅读更多...
雷军-2022.8小米创业思考-6-互联网七字诀之快：天下武功，唯快不破；快不是目的，快是手段；不要用战术上的勤奋掩盖战略上的懒惰。

雷军-2022.8小米创业思考-6-互联网七字诀之快：天下武功，唯快不破；快不是目的，快是手段；不要用战术上的勤奋掩盖战略上的懒惰。

第六章 互联网七字诀 专注、极致、口碑、快&#xff0c;这就是我总结的互联网七字诀&#xff0c;也是我对互联网思维的高度概括。 快 我们期待非常多的快&#xff0c;比如研发进展快、库存周转快、资金回笼快等等。但在这里&#xff0c;我们集中讨论的是公司在业务发展和面对…
阅读更多...
【5分钟学会一个知识点】01.Elasticsearch基本操作-增删改查

【5分钟学会一个知识点】01.Elasticsearch基本操作-增删改查

目录 【5分钟学会一个知识点-探索现代搜索与分析引擎的魅力】01.Elasticsearch基本操作-增删改查1.基本操作1.1索引操作1.2文档操作1.3查询1.4修改数据1.5查询1.5.1条件查询1.5.1.1遍历所有的索引1.5.1.2查询某个索引1.5.1.3条件查询1&#xff1a;使用GET url传参数1.5.1.4条件…
阅读更多...
18、案例实战：上亿请求轻松应对，看年轻代垃圾回收如何助力电商性能飞跃！

18、案例实战：上亿请求轻松应对，看年轻代垃圾回收如何助力电商性能飞跃！

18.1、背景引入 我们通常会通过案例分析&#xff0c;来指导大家如何在不同的场景下&#xff0c;预测系统的内存使用模型。我们需要合理地调整新生代、老年代、Eden和Survivor各个区域的内存大小&#xff0c;然后尽可能地优化参数&#xff0c;以减少新生代对象进入老年代的情况…
阅读更多...
An 2024下载

An 2024下载

An2024下载&#xff1a; 百度网盘下载https://pan.baidu.com/s/1cQQCFL16OUY1G6uQWgDbSg?pwdSIMS Adobe Animate 2024&#xff0c;作为Flash技术的进化顶点&#xff0c;是Adobe匠心打造的动画与交互内容创作的旗舰软件。这款工具赋予设计师与开发者前所未有的创意自由&#x…
阅读更多...
火绒安全原理、用法、案例和注意事项

火绒安全原理、用法、案例和注意事项

火绒安全是一款功能强大的安全软件&#xff0c;它采用了先进的安全技术和算法&#xff0c;通过实时监测、恶意代码识别、防火墙功能、沙箱技术和网络保护等多种手段&#xff0c;为用户提供全面的计算机安全防护。 1.为什么选用火绒安全&#xff1f; 火绒安全是一款优秀的安全软…
阅读更多...
用lobehub打造一个永久免费的AI个人助理

用lobehub打造一个永久免费的AI个人助理

Lobe Chat是一个开源的高性能聊天机器人框架&#xff0c;它被设计来帮助用户轻松创建和部署自己的聊天机器人。这个框架支持多种智能功能&#xff0c;比如语音合成&#xff08;就是让机器人能说话&#xff09;&#xff0c;还能理解和处理多种类型的信息&#xff0c;不仅限于文字…
阅读更多...
AI图书推荐：用GPT-4进行预测分析的实用指南

AI图书推荐：用GPT-4进行预测分析的实用指南

《用GPT-4进行预测分析的实用指南》&#xff08;A Practical Guide to Predictive Analytics with GPT-4&#xff09;为读者提供了一个全面的指南&#xff0c;介绍了如何利用GPT-4的强大预测能力&#xff0c;从理解预测分析的基础&#xff0c;到掌握GPT-4的使用&#xff0c;再到…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023