关于Hexo-Next

发表于 | 分类于 |

图片显示问题

图床方式

可以打开https://mp.csdn.net/mdeditor#来进行截图的直接粘贴
也可以把原本的图片的URL或者图片上传来生成转换后的Markdown语法
使用这个会加载比上传的要快

在这里插入图片描述

本地图片

相对来说麻烦,但是安全,因为图片都是存在本地的,访问起来也很慢
安装npm install hexo-asset-image --save
在站点配置文件的_config.yml中设置
post_asset_folder: true # 开启本地图片上传
url: /换成你自己的站点
并且打开\node_modules\hexo-asset-image\index.js把全部内容删除,替换成以下内容

index.js 
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
51
52
53
54
55
56
57
58
59
60
61
'use strict';
var cheerio = require('cheerio');

// http://stackoverflow.com/questions/14480345/how-to-get-the-nth-occurrence-in-a-string
function getPosition(str, m, i) {
  return str.split(m, i).join(m).length;
}

var version = String(hexo.version).split('.');
hexo.extend.filter.register('after_post_render', function(data){
  var config = hexo.config;
  if(config.post_asset_folder){
    	var link = data.permalink;
	if(version.length > 0 && Number(version[0]) == 3)
	   var beginPos = getPosition(link, '/', 1) + 1;
	else
	   var beginPos = getPosition(link, '/', 3) + 1;
	// In hexo 3.1.1, the permalink of "about" page is like ".../about/index.html".
	var endPos = link.lastIndexOf('/') + 1;
    link = link.substring(beginPos, endPos);

    var toprocess = ['excerpt', 'more', 'content'];
    for(var i = 0; i < toprocess.length; i++){
      var key = toprocess[i];
 
      var $ = cheerio.load(data[key], {
        ignoreWhitespace: false,
        xmlMode: false,
        lowerCaseTags: false,
        decodeEntities: false
      });

      $('img').each(function(){
		if ($(this).attr('src')){
			// For windows style path, we replace '\' to '/'.
			var src = $(this).attr('src').replace('\\', '/');
			if(!/http[s]*.*|\/\/.*/.test(src) &&
			   !/^\s*\//.test(src)) {
			  // For "about" page, the first part of "src" can't be removed.
			  // In addition, to support multi-level local directory.
			  var linkArray = link.split('/').filter(function(elem){
				return elem != '';
			  });
			  var srcArray = src.split('/').filter(function(elem){
				return elem != '' && elem != '.';
			  });
			  if(srcArray.length > 1)
				srcArray.shift();
			  src = srcArray.join('/');
			  $(this).attr('src', config.root + link + src);
			  console.info&&console.info("update link as:-->"+config.root + link + src);
			}
		}else{
			console.info&&console.info("no src attr, skipped...");
			console.info&&console.info($(this));
		}
      });
      data[key] = $.html();
    }
  }
});

在新建文章的时候hexo n 文章名就会在站点下的\source\_posts中创建一个.md文件,也会创建一个相同的文件夹
把图片都放入文件夹,引入使用![图片描述](文件夹名称\图片.png)

图片居左显示

首先在\themes\next\source\css\main.styl中添加@import "diy/diy";//导入我的自定义样式
在与main.styl同级目录创建一个文件夹diy并创建文件diy.styl

在这里插入图片描述

在里面添加

1
2
/*文章内图片居左*/
.post-body .fancybox img { margin-left: 0 !important; }

图片referrer

1
2
3
4
5
6
7
8
11. 2023-03-16 10:54:51
csdn图片不能访问
   + 修改文件`D:\Everything\Blog\blog\themes\next\source\js\src\bootstrap.js`
   + 添加内容
```js
  $('.post-body img').each(function () {
    $(this).attr('referrerPolicy',"no-referrer");
  });
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

# 关于分类的创建问题
```text
# 1种分类
categories:
- [分类1]

# 1种分类,并且下面有一个子分类
categories:
- [分类1,分类11]

# 2种分类
categories:
- [分类1]
- [分类2]

博文加密

安装npm install --save hexo-blog-encrypt
给.md文件添加开头password: 123456
进入文章会需要密码,退出的时候不点击文章下面的按钮则下次进入无需密码

在这里插入图片描述

*添加CNZZ统计功能

注册友盟云并点击跳转https://web.umeng.com/main.php?c=site&a=add

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

修改根目录\themes\next\layout\_third-party\analytics\cnzz-analytics.swig改为

1
2
3
4
5
{% if theme.cnzz_siteid %}
<div>
你的复制内容
</div>
{% endif %}

并且把主题配置文件的\themes\next\的_config.yml
cnzz_siteid: true

自定义CSS样式

在\themes\next\source\css\_custom\custom.styl

绑定域名

这里我选用阿里云的,直接支付宝登录https://cn.aliyun.com/
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
购买成功之后来到域名控制台https://dc.console.aliyun.com/next/index#/domain/list/all-domain
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

优化访问速度

1
2
# 设置不从google加载字体
use_font_lato: false

在这里插入图片描述
把fonts.googleapis.com改为fonts.useso.com
在这里插入图片描述
在主题配置文件下把host原本对应内容为空改为host: //fonts.lug.ustc.edu.cn
在这里插入图片描述

网站测速

进入地址https://ping.chinaz.com/
在这里插入图片描述

设置HTPPS安全

在这里插入图片描述
在这里插入图片描述
翻到最下面,
1,先删除自定义域名
2,保存
3,打勾
4,填上域名 例如我的www.taopanfeng.top
5保存
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

部署coding

同时部署github + codind,
但是取消了之前github的绑定的www.taopanfeng.top,现在把www.taopanfeng.top绑定到了coding

  • 注册https://coding.net/
  • 创建团队,然后下一步,再填写信息即可.
    在这里插入图片描述
  • 再进入https://coding.net/右上角选择登录
    在这里插入图片描述
  • 新建项目
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
  • 初始化仓库
    在这里插入图片描述
  • 设置公钥
    找到C盘用户目录下的.ssh目录下的id_rsa.pub
    在这里插入图片描述
    进入个人设置
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
  • 测试公钥是否正确
    本地打开 Git Bash 窗口，输入一下命令：ssh -T git@coding.net
    这时候会显示是否继续，选择 yes 继续，如果提示下列内容成功，即 SSH 公钥配置成功：
    1
    Hello xxx You've connected to Coding.net by SSH successfully!
    当然，xxx 是我 Coding 帐户的名字，不同的帐户会不一样，如果显示如下的错误：
    在这里插入图片描述
    在这里插入图片描述
    说明防火墙完全屏蔽了端口 22 ，这时候不要慌张，直接输入如下命令使用 Coding 提供的 443 端口 SSH 服务即可解决：
    ssh -T -p 443 git@git-ssh.coding.net
    在这里插入图片描述
  • 发布静态网址
    在这里插入图片描述
    在这里插入图片描述
  • 点击部署,当然,这时候是不行的,仓库里面还没有东西
    在这里插入图片描述
  • 修改站点配置文件
    把地址指向你自己的域名
    在这里插入图片描述
    修改推送地址,现在我的设置是两个地址都推送,但是我只使用coding,作为访问,因为它是国内的访问速度比较快.
    在这里插入图片描述
    1
    2
    3
    4
    5
    6
    deploy:
      type: git
      repository:
          github: https://github.com/TaoPanfeng/taopanfeng.github.io.git
          coding: https://e.coding.net/taopanfeng/taopanfeng.git
      branch: master
  • 把之前文章中的github的地址都指向自己的域名www.taopanfeng.top
    这里是使用IDEA进行文件夹导入,使用Ctrl + Shift + R进行多文件内容搜索替换,指定文件夹搜索
    在这里插入图片描述
  • 替换之后,我们先部署一下,还是老指令了,我把三步合成一个指令hexo clean ; hexo g -d
    部署成功,再进行DNS解析
    在这里插入图片描述
  • 取消github的部署
    在这里插入图片描述
    在这里插入图片描述
  • 使用coding绑定域名www.taopanfeng.top
    在这里插入图片描述

搜索服务：Algolia

  1. 进入网址 https://www.algolia.com/

  2. 谷歌账号登录

  3. 手机:大王卡，网址:taopanfeng.com

  4. 创建 index:taopanfeng
    在这里插入图片描述

  5. 创建 API keys
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

  6. 记录下你的 APP ID，和 API key
    在这里插入图片描述

  7. 博客根目录执行npm install hexo-algolia --save
    在这里插入图片描述

  8. 站点根目录文件_config.yml，添加以下内容：

    1
    2
    3
    4
    algolia:
      applicationID: '你的 APP ID'
      apiKey: '你的 APP key'
      indexName: '输入刚才创建的 index name'

  9. 在博客根目录右击git bash

    1
    2
    3
    4
    5
    6
    # 注意：每次修改文章内容，都要执行这两个命令进行手动更新索引，至少我现在是这么认为。2021-12-29 10:38:58
    # 我的搜索快捷输入法配置：hexos,1=export HEXO_ALGOLIA_INDEXING_KEY="你的API KEY";hexo algolia;hexo s

    export HEXO_ALGOLIA_INDEXING_KEY="你刚才新创建的API KEY"

    hexo algolia

    在这里插入图片描述

  10. 修改主题内的_config.yml

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    # Algolia Search
    algolia_search:
      enable: true
      hits:
        per_page: 100
      labels:
        input_placeholder: Search for Posts
        #hits_empty: "We didn't find any results for the search: ${query}"
        #hits_stats: "${hits} results found in ${time} ms"
        #
        #hits_empty: "我们没有找到任何搜索结果: ${query}"
        hits_empty: "毛都没有~"
        hits_stats: "找到约${hits}条结果 （用时${time} ms）"

  11. 启动即可

    1
    2
    3
    hexo clean

    hexo s

  12. 测试
    在这里插入图片描述

  13. 记得把站点文件的 url 改正确
    在这里插入图片描述