Blog_踩坑总结

1.文章上传图片无法显示

初次搭建完博客后，想上传自己的第一篇文章，结果发现发布运行后文章内的图片全部丢失了，如下图

1.0.分析错误

在通过浏览器F12审查元素后，发现是请求路径有误，我的域名是truly01.github.io,而请求路径却是truly01.github.io/.io/xxx，应该是安装的hexo-asset-image插件有问题。

1.2.解决方案

修改安装的图片路径插件：修改/node_modules/hexo_asset-image/index.js

'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();
    }
  }
});

注意：

• 当前md文件下需要存在对应名字的文件夹存放图片
• 插入图片：

2.Github+Jsdelivr实现CDN加速

在theme中的_config.yml中修改了Jsdelivr的地址，试图实现CDN加速，结果发现发布运行后本站内容样式全部丢失了，如下图

2.1.分析错误

在通过浏览器F12审查元素后，发现是请求路径失败，是因为什么呢？通过检查_config.yml中的Jsdelivr.url，对比在github中的目录结构来看。

• 可得出，是cdn加速的路径只加速了medias下的图片，而css的样式表却没有

2.2.解决方案

修改_config.yml：

jsDelivr:
  url: https://cdn.jsdelivr.net/gh/Truly01/Truly01.github.io/

然后重新启动，完美解决问题！如果遇到图片加载失败的情况，请忽略，等待GitHub加载过来后这个问题自然会解决。

3.个人博客收录百度

查看网站是否被收录

首先我们可以输入 site:域名 来查看域名是否被搜索引擎收录，如下图所示，表示没有收录：

百度资源平台添加网站

访问百度搜索资源平台官网，注册或者登陆百度账号，依次选择【用户中心】-【站点管理】，添加你的网站，在添加站点时会让你选择协议头（http 或者 https），如果选择 https，它会验证你的站点，大约能在一天之内完成。

3.1.分析

添加站点，如下图

• 到此步完成了站点的添加

  • 由于百度的spider是爬取不到GitHub的内容的，所以在第三步验证网站的时候，建议选择CNAME验证的方式。

  验证失败

  
  • hexo在每个page加了一个layout，导致认证内容无法识别，在验证文件第一行加入如下。

  ---
  layout: false
  ---

3.2.提交收录

提交百度进行收录

在成功通过验证后，要把url提交百度进行收录。百度提供了自动提交和手动提交两种方式，其中自动提交又分为主动推送、自动推送和**sitemap **三种方式，以下是官方给出的解释：

• 主动推送：最为快速的提交方式，推荐您将站点当天新产出链接立即通过此方式推送给百度，以保证新链接可以及时被百度收录
• 自动推送：是轻量级链接提交组件，将自动推送的 JS 代码放置在站点每一个页面源代码中，当页面被访问时，页面链接会自动推送给百度，有利于新页面更快被百度发现
• sitemap：您可以定期将网站链接放到sitemap中，然后将sitemap提交给百度。百度会周期性的抓取检查您提交的sitemap，对其中的链接进行处理，但收录速度慢于主动推送
• 手动提交：如果您不想通过程序提交，那么可以采用此种方式，手动将链接提交给百度