首页 历练ing Blog

# hexo 中代码块样式调整 1

# 问题描述

  • 代码显示在代码的头部，代码块 body 部分是空白的。
  • 代码块前面的三个不同颜色的小点被遮挡。
  • 代码块区域放大以后不能点返回箭头，否则页面卡住，必须刷新页面才能继续浏览。
  • 代码块的行号从头部开始显示。

# 解决方法

  1. 前四个问题我找了一天的答案，总是有瑕疵，终于，第二天中午的时候，我找到了，原来是主题配置的问题，所以啊，都是不认真看主题配置的原因，我用的是 hexo 中的 shoka 主题。主题配置里面有提到。停用默认代码高亮功能，否则代码块的 mac 样式不能正常显示。找到 highlight 和 prismjs 把 enable 改成 false

  2. 以下是我的代码：

    highlight:
      enable: false # 主题配置需要停用
      auto_detect: true # 代码块高亮
      line_number: true
      tab_replace: ''
      wrap: true
      hljs: false
      
    prismjs:
      enable: false # 主题配置需要停用
      preprocess: true
      line_number: true
      tab_replace: ''

# hexo 中代码块样式调整 2

# 问题描述

  • 代码块自动换行
  • 代码块前后有空白行问题

# 解决方法

  1. 找到 hexo-util/lib/highlight.js 文件，一般路径为 root/node_modules/hexo-util/lib/highlight.js

  2. 修改 highlight.js 中的代码，有些在 35~38 行处，有些在 91 行处，各有不同。

  3. 修改前

    numbers += '<div class="line">' + (firstLine + i) + '</div>';
    content += '<div class="line';
    content += (mark.indexOf(firstLine + i) !== -1) ? ' marked' : '';
    content += '">' + line + '</div>';

  4. 修改后

    numbers += '<span class="line">' + (firstLine + i) + '</span>\n';
    content += '<span class="line';
    content += (mark.indexOf(firstLine + i) !== -1) ? ' marked' : '';
    content += '">' + line + '</span>\n';

  5. 总结：把里面的 div 标签换成 span 标签

# 在 Hexo 插入本地图片

# 问题描述

  • 图片显示不成功
  • 页面没反应，或者显示图片的地方只显示 alt 里面的类容
  • 或者成功以后打印出 no src attr skipped... 这类似的代码

# 解决方法

  1. 首先我们需要安装一个插件

    npm install https://github.com/CodeFalling/hexo-asset-image --save

    不要忘记修改配置文件 post_asset_folder 值为 true

  2. 由于本身的 asset-image 有 bug ，我们需要在 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{
    	// 注释这两条打印是为了不报打印结果，不然你的命令窗口总会显示 no src attr skipped... 这类似的字样。
    		//console.info&&console.info("no src attr, skipped...");
    		//console.info&&console.info($(this));
    		}
          });
          data[key] = $.html();
        }
      }
    });
  3. 最后，打开_config.yml 修改下述内容
    # URL
    ## If your site is put in a subdirectory, set url as 'http://example.com/child' and root as '/child/'
    # url: http://example.com
    url: https://XXXXX.github.io # 主要修改这里，把前面的 XXXXX 改为自己的 github 地址即可。
    root: /
    # permalink: :year/:month/:day/:title/
    permalink: :title/
    permalink_defaults:
  4. 总结，由于我用的是 Typora 编辑器，对于 markdown 来说，有很多编辑器，可能各不相同，在插入图片的时候我是直接 QQ 截图再需要放的地方直接 Ctrl + V ，这样的话，就会出现图片，上面会弹出将这个图片复制到。。。一般是在 root/source/images（这个文件夹是自己新建的，以后写文章里面的插图，我都放在这里面）之下。除了这里，还有文章的相同路径下也会保存一张相同的图片，（这张图片可以删除，不影响渲染。）建议删除文章之下的图片，以免重复多余。
  5. 图片放入上面第四步说的文件路径 root/source/images 之下以后，放入自己对应的文件夹里面，一般每一篇博客都会单独创建一个专门存放该篇文章的图片文件夹。在文件里面引用的时候注意自己的路径有没有写错。路径格式如： ![image-20201117153748902](../../../images/blog/image-20201117153748902.png)
    注意： 这里路径注意必须是 images 文件之下的，（路径必须是../ 加上 images。../ 结束以后第一个路径文件必须是 images。）
    这里的路径注意了，不是 \ 而是反斜杠 / ，和写代码的路径引用一样的，具体在当前博客的第几层就有几个 ../ 。每个 ../ 代表上一层级。
# hexo 分类精选渲染问题
# 问题描述
  • 精选翻转卡片渲染不出来
# 解决方法
  1. _config.yml 配置
    只要配置对了，应该就可以了，下面我来说一下配置问题，打开根目录下的 _config.yml 文件，找到以下配置项。
    default_category: uncategorized
    category_map: # edit for Theme.shoka
      主题介绍: shoka #右上角小标题
      主题配置: Theme-Configuration
      We-Games: we-games #右上角小标题
      英雄联盟: LOL
      QQ飞车: QQ飞车
      历练ing: Growth-Diary #右上角小标题
      成长日记: Blog
    • 主题介绍 ，这个是你精选分类卡片中最右上角显示的字样。 shoka ，这个是文件夹的名字，这是我文件夹的路径 root\source\_posts\shoka
    • 主题配置 ，这个是显示在精选分类卡片正中间的文字标题。 Theme-Configuration 这个是 shoka 目录之下的子文件夹的名称
    • 在这个 Theme-Configuration 文件夹中，放着你写好的.md 文件和一张以 cover.jpg 命名的图片。这里需要 注意的是 图片格式为 jpg，名字为 cover。千万不要弄错了。到这里，只是配置好了 _config.yml 文件。
    • 这一步配置.yml其是可以省略
  2. .md 文件头部配置
    这就是 .md 文件的 title 区域
    title: Step.1 依赖插件
    date: 2020/08/13
    categories:
    - [主题介绍, 主题配置]
    tags:
    - Hexo
    - 教程
    • title，该文章的标题，我就不多说了。
    • date，时间，显示写这篇文章的时间，是自己定义的，主题不会自动生成。
    • categories 类别。主要的就是这个了。- [第一个是显示在卡片右上角的字样，第二个是卡片中间的标题，。。。句号代码后面可有可无，如果有，就是翻转以后显示的文件夹名称，而不是直接能看到里面的文章，如果没有，就是可以直接看到这个文件夹之下的文章标题。点击即可调到相应的文章。
    • 命名格式 文件夹命名格式 不能以+符号链接 否则精选卡片显示不出来。可以是英文，也可以是中文，还可以是中文与英文结合。 但是 中间不能出现 + 号。图片名字一定是 cover 加 .jpg 格式。
    • tags，给当前的这篇文章添加标签，这个标签会自动在你的用户栏生成。
    • 总结：图片的命名与图片格式不要弄错， 重点 在 .md 的配置中，（后期熟悉了以后， .yml文件可以不用配置 ）除了字以外，其他的全部都是英文状态下的。包括 标点符号 也是英文状态下的。 categories 类别之下的 - 后面有一个空格。
# 博客主题没有推到 github 上
有时候提交主题文件夹失败，提交上去以后打不开。
  1. 先移除空的主题文件夹。
    git rm --cached themes / + 《你的主题文件夹名字》，译：意思是移除在主题文件之下的某个主题文件夹.
  2. 移除之后，使用 git status 译：查看移除主题的状态。移除成功以后再添加
    git add themes / + 《你的主题文件夹名字》译：意思是在主题文件之下添加某个主题文件夹
  3. 使用： git shtatus 译：查看添加主题的状态。之后再执行 git add . git commit -m "test",git push 等操作就可以了。
# 博客主题的颜色更改
eeeeee，686d76，373a40，19d3da
# 添加文字特效
++ 下划线 ++
++ 波浪线 ++{.wavy}
++ 着重点 ++{.dot}
++ 紫色下划线 ++{.primary}
++ 绿色波浪线 ++{.wavy .success}
++ 黄色着重点 ++{.dot .warning}
~~ 删除线 ~~
~~ 红色删除线 ~~{.danger}
== 荧光高亮 ==
[赤橙黄绿青蓝紫]{.rainbow}
[红色]{.red}
[粉色]{.pink}
[橙色]{.orange}
[红色]{.yellow}
[绿色]{.green}
[靛青]{.aqua}
[蓝色]{.blue}
[紫色]{.purple}
[灰色]{.grey}
快捷键 [Ctrl]{.kbd} + [C]{.kbd .red}
H~2~0
29^th^
这段代码因为自动被 pangu.js 处理了一下，加了几个空格，导致直接复制代码不能正常显示。 正确的代码是 ++下划线++ ~~删除线~~ ==荧光高亮== ，不能有空格哦。
下划线
波浪线
着重点
紫色下划线
绿色波浪线
黄色着重点
删除线
红色删除线
荧光高亮
赤橙黄绿青蓝紫
红色
粉色
橙色
红色
绿色
靛青
蓝色
紫色
灰色
快捷键 Ctrl + C
H20
29th
# label 标签块
:::default
默认
:::
:::primary
基本基本
:::
:::info
提示提示
:::
:::success
成功成功
:::
:::warning
警告警告
:::
:::danger
危险危险
:::
默认
基本基本
提示提示
成功成功
警告警告
危险危险