Hexo博客重新部署与Git配置

由于电脑重装了一次，发现之前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 搭建博客拥抱舒爽

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

ArcGIS水文水环境数据编辑、管理、处理与分析；ArcGIS水文分析及流域特征提取；湖泊水库水环境监测及评价；河道水污染预测与水环境容量计算等案例实践

ArcGIS水文水环境数据编辑、管理、处理与分析；ArcGIS水文分析及流域特征提取；湖泊水库水环境监测及评价；河道水污染预测与水环境容量计算等案例实践

目录 专题一 ArcGIS&#xff1a;数据管理 专题二 ArcGIS&#xff1a;数据转换 专题三 ArcGIS&#xff1a;地图制作 专题四 水文水环境数据编辑与管理 专题五 水文水环境数据处理与分析 专题六 ArcGIS水文分析及流域特征提取 专题七 湖泊水库水环境监测及评价 专题八 河…
阅读更多...
java学习之zip炸弹攻击

java学习之zip炸弹攻击

一、概述 Zip炸弹是一种特殊类型的Zip文件&#xff0c;它包含了大量的无用数据。Zip文件格式允许使用压缩算法来减小文件的大小&#xff0c;但是如果Zip文件中的某些内容被重复压缩&#xff0c;就会导致文件大小急剧增加。Zip炸弹利用这个特性&#xff0c;将一些无用的数据多次…
阅读更多...
配置接口的主从IP地址

配置接口的主从IP地址

组网需求 如图1所示&#xff0c;Router上只有一个空闲接口GE1/0/0&#xff0c;但该局域网中的计算机分别属于2个不同的网段10.16.1.0/24和10.16.2.0/24&#xff0c;要求通过Router可以实现一个接口接入两个不同的网段。 图1 配置IP地址示例 配置思路 配置主从IP地址的思路…
阅读更多...
【C++】STL-list的使用

【C++】STL-list的使用

目录 1、list的使用 1.1 list的构造 1.2 list的遍历 1.3 list capacity 1.4 list element access 1.5 容量相关 list是一个带头双向循环链表 1、list的使用 1.1 list的构造 1.2 list的遍历 list只有两种遍历方式&#xff0c;因为没有operator[] 因为list的双向链表&am…
阅读更多...
Docker复习

Docker复习

文章目录 基础Docker基础命令镜像操作命令容器操作命令 案例:安装MySql案例:查看DockerHub&#xff0c;拉取Nginx镜像&#xff0c;并运行容器 基础 Docker基础命令 启动Docker systemctl start docker镜像操作命令 从远程仓具下载镜像到本地 docker pull 镜像名称 无版本号…
阅读更多...
高并发系统设计-系统的“三高“目标

高并发系统设计-系统的“三高“目标

目录 一、高并发 1.高并发相关指标 2.如何提高并发能力 二、高并发的目标 1.高性能 2.高可用 3.高扩展 一、高并发 高并发&#xff08;High Concurrency&#xff09;是互联网分布式系统架构设计中必须考虑的因素之一&#xff0c;它通常是指&#xff0c;通过设计保证系统能…
阅读更多...
parallelsdesktop19密钥激活 PD19虚拟机完整图文安装教程

parallelsdesktop19密钥激活 PD19虚拟机完整图文安装教程

Parallels Desktop 19 &#xff08;简称 PD 19)是最新发布的 macOS 平台的 windows 虚拟机&#xff0c;本文是使用 Parallels Desktop 19 虚拟机安装 Windows 的详细图文破解安装教程。 一下载安装 Parallels Desktop 软件下载完成后打开&#xff0c;双击打开 安装.dmg Para…
阅读更多...
1070: 邻接矩阵存储简单路径

1070: 邻接矩阵存储简单路径

解法&#xff1a; #include<iostream> #include<vector> using namespace std; int arr[100][100]; int n; int sta, des; vector<int> path; vector<vector<int>> res; void dfs(vector<int> &a,int i) {a[i] 1;path.push_back(i);…
阅读更多...
【漏洞复现】osCommerce install.php存在远程代码执行漏洞

【漏洞复现】osCommerce install.php存在远程代码执行漏洞

免责声明&#xff1a;文章来源互联网收集整理&#xff0c;请勿利用文章内的相关技术从事非法测试&#xff0c;由于传播、利用此文所提供的信息或者工具而造成的任何直接或者间接的后果及损失&#xff0c;均由使用者本人负责&#xff0c;所产生的一切不良后果与文章作者无关。该…
阅读更多...
第5章 处理GET请求参数

第5章 处理GET请求参数

1 什么是GET请求参数 表单GET请求参数是指在HTML表单中通过GET方法提交表单数据时所附带的参数信息。在HTML表单中&#xff0c;可以通过表单元素的name属性来指定表单字段的名称&#xff0c;通过表单元素的value属性来指定表单字段的值。当用户提交表单时&#xff0c;浏览器会将…
阅读更多...
C# WinForm —— 16 MonthCalendar 介绍

C# WinForm —— 16 MonthCalendar 介绍

1. 简介 可以选择单个日期&#xff0c;也可以选择一段日期&#xff0c;在选择时间范围上 比较适用&#xff0c;但不能跨月份选择日期范围 在直观上&#xff0c;可以快速查看、选择日期/日期范围 2. 常用属性 属性解释(Name)控件ID&#xff0c;在代码里引用的时候会用到,一般…
阅读更多...
邮箱API发送邮件调试的方法？有哪些限制？

邮箱API发送邮件调试的方法？有哪些限制？

邮箱API发送邮件调试的好处&#xff1f;如何正确调试邮箱API&#xff1f; 使用邮箱API发送邮件是一个常见的需求。然而&#xff0c;当遇到发送失败、内容错误或格式问题时&#xff0c;如何进行有效的调试就显得尤为重要。本文将为您介绍一些邮箱API发送邮件调试的方法&#xf…
阅读更多...
Leetcode-有效的括号

Leetcode-有效的括号

20. 有效的括号 - 力扣&#xff08;LeetCode&#xff09;https://leetcode.cn/problems/valid-parentheses/ 题目 给定一个只包括 (&#xff0c;)&#xff0c;{&#xff0c;}&#xff0c;[&#xff0c;] 的字符串 s &#xff0c;判断字符串是否有效。 有效字符串需满足&…
阅读更多...
MySql软件安装

MySql软件安装

1.打开mysql官网网址 MySQL :: Download MySQL Community Server 2.本次针对版本8的图形化界面安装&#xff0c;下载成功后接下来对MySQL进行安装 3.图形化下载后有一个MSI文件 4.我们安装典型即可&#xff0c;选择第一个 5.选择数据库信息存放的路径&#xff0c;我默认放在C盘…
阅读更多...
Redis继续（黑马）

Redis继续（黑马）

Redis持久化 RDB与AOF RDB记录是二进制数据&#xff0c;Redis停机时会触发保存&#xff0c;名称&#xff1a; dump.rdb 缺点&#xff1a;间歇式复制可能存在宕机数据更新丢失 AOF 记录的写操作命令&#xff0c;每秒记录一下&#xff0c;也存在数据更新丢失的可能&#xff0c;相…
阅读更多...
【数轮】数论、质数、最大公约数、菲蜀定理

【数轮】数论、质数、最大公约数、菲蜀定理

数学 唯一分解定理 n>2都可以表示为质因数的乘方。 令 n a1b1a2b2 … \dots … a1,b1 … \dots …都是质因数&#xff0c;b1,b2 … \dots …是对应质因数的数量。 调和级数 11/2 1/3 1/4 ⋯ \cdots ⋯ 1/ n 约等于 logn。 证明过程&#xff1a; 1/3 1/4 < (1/2) …
阅读更多...
idea已配置的git仓库地址 更换新的Git仓库地址 教程

idea已配置的git仓库地址 更换新的Git仓库地址 教程

文章目录 目录 文章目录 更改流程 小结 概要更改流程技术细节小结 概要 先在idea控制台走一下流程 先将本地的git仓库删除 1. 查看当前远程仓库地址&#xff1a; 在终端或命令行中&#xff0c;导航到你的项目目录&#xff0c;并运行以下命令查看当前的远程仓库地址&#xff…
阅读更多...
CTF之love_math

CTF之love_math

这个题目简单看一下就知道要传参进行执行系统命令以达到找到flag的目的。 但是又可以发现过滤了很多东西。 这个题的绕过方法可以用到三个函数 base_convert(number,froombase,tobase)//分别为原始值&#xff0c;原来进制&#xff0c;要转换的进制dechex("十进制数"…
阅读更多...
气膜建筑电源配置是怎样的—轻空间

气膜建筑电源配置是怎样的—轻空间

在气膜建筑中&#xff0c;电源配置是确保建筑控制系统连续运行的重要组成部分。以下是该建筑的电源配置方案&#xff1a; 1. 市电供电与备用发电机&#xff1a; 为了应对市电中断等突发情况&#xff0c;系统采用市电供电与备用柴油发电机双重供电方式。这种配置保证了即使在市电…
阅读更多...
JDK APT(Annotation Processing Tool) 编译时注解处理器

JDK APT(Annotation Processing Tool) 编译时注解处理器

博文目录 文章目录 javacAnnotation ProcessingHow Annotation Processing WorksCompilation Environment and Runtime Environment maven-compile-plugin对 Maven pom 中配置注解处理器的理解Lombok, MapStruct, MyBatis-Flex 说明测试只在 dependencies 中配置 Lombok 和 Ma…
阅读更多...
最新文章

Copyright @ 2022~2023