Coder Social home page Coder Social logo

xovel.github.io's People

Contributors

xovel avatar

Watchers

 avatar  avatar

xovel.github.io's Issues

[next]配置 - 自定义导航菜单

在主题目录下的配置文件_config.yml中找到menu,进行相应改动即可。

本博客现用菜单配置如下:

# ---------------------------------------------------------------
# Menu Settings
# ---------------------------------------------------------------

# When running the site in a subdirectory (e.g. domain.tld/blog), remove the leading slash (/archives -> archives)
menu:
  home: /
  categories: /categories
  tags: /tags
  archives: /archives
  about: /about
  #commonweal: /404.html
  garden: /garden


# Enable/Disable menu icons.
# Icon Mapping:
#   Map a menu item to a specific FontAwesome icon name.
#   Key is the name of menu item and value is the name of FontAwsome icon. Key is case-senstive.
#   When an question mask icon presenting up means that the item has no mapping icon.
menu_icons:
  enable: true
  #KeyMapsToMenuItemKey: NameOfTheIconFromFontAwesome
  home: home
  about: user
  categories: th
  tags: tags
  archives: archive
  commonweal: heartbeat
  garden: life-ring

menu_icons对应的是菜单的图标。使用FontAwesome icon

[blog]记录 - 数据整体迁移至新购笔记本

由于一个疏忽操作(没有把博客目录下的.deploy_git)打包带走,在提交的时候被强制覆盖,丢失了之前所有的提交记录。

还好本地记录没有删除,于是又重新在之前的电脑设备上提交了一次,又把.deploy_git全部拷贝至新电脑中。由于新电脑上的node_modules是根据package.json重新安装的,可能会导致之前的部分设置失效

具体的改动部分,待整理完毕之后,再进行追加说明。意思就是可能会弃坑不作说明

以上,2016年11月18日,被解雇之后的交接过程中出现的一点小意外。

[hexo]配置 - 文档链接

在博客根目录下的_config.yml中找到permalink:行,将值改为想要的方式即可。默认值是:year/:month/:day/:title/

本博客中使用的是permalink: article/:title.html

文档统一放在article目录下,以名字进行命名,后面添加.html表示此地无银三百两,表示是一个静态页面。

[next]配置 - 导航菜单与侧边栏菜单独立

在next的主题中,顶部导航的菜单与侧边栏的菜单使用的是同样的代码。在某些特殊的场景下,比如侧边栏要显示TAGS链接,但顶部菜单栏不需要。这个时候就需要改动一下相关的设置了。

实现思路如下:在全局配置的文件中,加入单独的设置项。然后在布局模版中根据这些设置项来生成对应的菜单代码即可。

本博客暂时没有开启这样的配置。2016.11.1,已修改,去掉了顶部的tags链接展示

[hexo]配置 - 分页数量控制

在博客根目录下的_config.yml中找到per_page部分,指定分页数量。本博客采用如下方式进行分页控制:

# Pagination
## Set per_page to 0 to disable pagination
per_page: 8
pagination_dir: page

archive_generator:
  per_page: 20

tag_generator:
  per_page: 20

category_generator:
  per_page: 12
  • 全局分页,每页8篇文章
  • 文档归档页,每页20篇文章
  • TAG页,每页20篇文章
  • 分类页,每页12篇文章

后面三个默认配置文件中没有,加上即可。

[blog]优化 - 压缩HTML静态文件

使用了next主题之后,默认生成的HTML文件中,会出现大量的空行。直接查看网页源代码就能够看到。

hexo默认没有提供压缩HTML/CSS/JS的功能,但我们可以通过另外的途径进行代码的压缩。

之前的版本,有一个名为hexo-generator-minify的插件,但已经无人维护,不支持hexo 3.x版本。

官方插件库能搜到的压缩插件,均有不同程度的问题。详情这里不表,具体诸君可以自行安装测试。

这里介绍一种gulp自动化任务压缩的方式来处理这个问题,缺陷就是每一次blog在deploy的时候都需要事先执行一次这个压缩任务。

本人的博客曾经开启过压缩功能,但后来放弃了。一方面是嫌麻烦,一方面也是觉得暂时没有这个必要

本人采用的具体压缩工具为:

  • gulp-htmlmin,该插件对HTML代码进行压缩。
  • gulp-htmlclean,该插件对HTML进行代码清理,去除不必要的空行等。
  • gulp-clean-css,该插件对CSS代码进行压缩与清理。

另外有一个图片压缩工具,暂未使用:gulp-imagemin

JS压缩工具可以参考:gulp-uglifyUglifyJS2

引入各种插件:

var gulp = require('gulp');

var htmlmin = require('gulp-htmlmin');
var htmlclean = require('gulp-htmlclean');
var cleanCSS = require('gulp-clean-css');
var imagemin = require('gulp-imagemin');

本人采用的核心的任务代码如下:

gulp.task('minify-html', function() {
  return gulp.src('./public/**/*.html')
    .pipe(htmlclean())
    .pipe(htmlmin({
         removeComments: true,
         minifyJS: false,
         minifyCSS: true,
         minifyURLs: false,
    }))
    .pipe(gulp.dest('./public'))
});

那么,在每一次deploy之前,在Git Bash下执行一次gulp minify-html即可对所有的HTML代码进行压缩。

CSS和JS的压缩可以编写类似的代码,这里不再赘述。

[marked]修正 - 表格解析时单元格带竖线`|`的问题

缘由

在现有的表格解析中,如果单元格中出现竖线符号,在进行分割解析时会出现偏差。对此,本人做了一番改动,以便于表格的单元格可以使用正常使用竖线。

基本思路

在分解表格中的行之前,现将竖线替换为其它文本,使用竖线分割之后,再在进行单元格解析的时候换回来。

具体代码

首先,现将表格中的竖线符替换:

...
    // table no leading pipe (gfm)
    if (top && (cap = this.rules.nptable.exec(src))) {
      src = src.substring(cap[0].length);

      item = {
        type: 'table',
        header: cap[1].replace(/^ *| *\| *$/g, '').split(/ *\| */),
        align: cap[2].replace(/^ *|\| *$/g, '').split(/ *\| */),
        cells: cap[3].replace(/\n$/, '').split('\n')
      };

      for (i = 0; i < item.align.length; i++) {
        if (/^ *-+: *$/.test(item.align[i])) {
          item.align[i] = 'right';
        } else if (/^ *:-+: *$/.test(item.align[i])) {
          item.align[i] = 'center';
        } else if (/^ *:-+ *$/.test(item.align[i])) {
          item.align[i] = 'left';
        } else {
          item.align[i] = null;
        }
      }

      for (i = 0; i < item.cells.length; i++) {
        item.cells[i] = item.cells[i]
          .replace(/\\\|/g, '~ZZZ~')
          .split(/ *\| */);
      }

      this.tokens.push(item);

      continue;
    }

...

上面的代码中中间的for循环加了一句.replace(/\\\|/g, '~ZZZ~'),将表格单元格中的竖线替换为~ZZZ~

上面的代码是没有前导竖线的,带前导竖线的markown格式的解析语法代码在下面这部分代码中,我们同样进行类似的替换:

...

    // table (gfm)
    if (top && (cap = this.rules.table.exec(src))) {
      src = src.substring(cap[0].length);

      item = {
        type: 'table',
        header: cap[1].replace(/^ *| *\| *$/g, '').split(/ *\| */),
        align: cap[2].replace(/^ *|\| *$/g, '').split(/ *\| */),
        cells: cap[3].replace(/(?: *\| *)?\n$/, '').split('\n')
      };

      for (i = 0; i < item.align.length; i++) {
        if (/^ *-+: *$/.test(item.align[i])) {
          item.align[i] = 'right';
        } else if (/^ *:-+: *$/.test(item.align[i])) {
          item.align[i] = 'center';
        } else if (/^ *:-+ *$/.test(item.align[i])) {
          item.align[i] = 'left';
        } else {
          item.align[i] = null;
        }
      }

      for (i = 0; i < item.cells.length; i++) {
        item.cells[i] = item.cells[i]
          .replace(/^ *\| *| *\| *$/g, '')
          .replace(/\\\|/g, '~ZZZ~')
          .split(/ *\| */);
      }

      this.tokens.push(item);

      continue;
    }
...

接下来,在表格单元格的解析代码中将这个~ZZZ~换回来即可。

...
Renderer.prototype.tablecell = function(content, flags) {
  var type = flags.header ? 'th' : 'td';
  var tag = flags.align
    ? '<' + type + ' style="text-align:' + flags.align + '">'
    : '<' + type + '>';

  content = content.replace(/~ZZZ~/g,'|');
  return tag + content + '</' + type + '>\n';
};
...

以上代码中这一句content = content.replace(/~ZZZ~/g,'|');是新加的,用于将内容替换回来。之后再进行输出即可。


如果你有更好的解决方案,欢迎指出,一起交流。

[next]配置 - 修复 hexo 升级引发的外部链接样式失效的问题

hexo 的一个升级 hexo#2820,让之前自己自定义的一个外部链接样式失效了,追查原因之下,我赞同将外部链接的 rel 属性调整为 noopener,故此将主题文件下的样式代码调整一下。

具体文件为: ..\source\css\_common\components\post\post.styl

最后一段代码修改为:

.post-body a[rel~="noopener"] {
  color: #3370BB;
}
.post-body a[rel~="noopener"]:after {
  content:"\f08e";
  font: normal normal normal 14px/1 FontAwesome;
  margin-left:2px;
}

[blog]记录 - 开启另一个秘密花园

现有博客里面有一个花园/竹林模块,用来记录自己的一些开发经历和小项目,已经很久没有更新了。之前的一次博客改变,正准备废弃这个模块。

由于各种原因,~~好吧,其实是我自己懒了,~~博客的改版一直没有提上日程。最近因为自己生活上的调整和思维模式的转变,准备重新开两个模块,一个用于记录自己身边的人和事情,而另一个则将会是完全属于我自己的私人花园,名字基本已经拟定。

后面的这个模块将会进行在线方式的更新,但是访问入口保留。

之前也有一个这样的模块,叫做《圣血记》,但是迟迟没有更新。

或许吧,或许,我会有更好的状态。前途总归是迷茫的,我只是有点不安定。

其实,通过atom.xml,是可以找到这些隐藏模块的访问地址的。我还没有想过要阻止这个文件的内容包含相关的隐藏访问地址。

[next]配置 - 添加外部链接高亮效果

\source\css\_common\components\post\post.styl添加以下代码:

.post-body a[rel~="external"] {
  color: #3370BB;
}
.post-body a[rel~="external"]:after {
  content:"\f08e";
  font: normal normal normal 14px/1 FontAwesome;
  margin-left:2px;
}

[blog]记录 - Brackets软件插件之emmet失效的问题的解决

最近决定将IDE迁移到brackets,毕竟是adobe开发的用来替代古老臃肿的Dreamweaver的,口号就是Code The Web,为Web编程提供一套完善的IDE。


为什么是brackets?其实是可以用sublime的,但是sublime只是一个编辑器,没有IDE的一些特性,即便是有了插件的支持,也很难与大型IDE媲美。

回想我用过的IDE,最开始的FrontPage,到VS,再到后来的初次全面接触前端开发使用的Dreamweaver。而后离开福建回到湖南,开始抛弃Dreamweaver,换了一种非常极端的方式:放弃了IDE,直接采用常规编辑器Notepad++、UltraEdit来进行代码的编写。那滋味其实也还好,毕竟,那个时候最IDE的要求并不高,所使用的后台语言是asp,都用不着开带着各种兼容性问题的Dreamweaver。

之后的正式将主要编辑器从Notepad++转移到Sublime Text 3上面来了。用了很长一段时间的Sublime Text之后被其优雅的处理代码的方式所吸引。当然这过程中间也是过诸多其他的编辑器和IDE,比如Atom,Brackets,VS2012,那个时候还是偏向于使用纯粹的编辑器的。当然Notepad++因为处理多个文件方面的优势,我也一直在使用。

在现在这个公司工作之后,由于项目采用的配套的IDE,也就是可以称得上是超级IDE的WebStorm,重心也就转移到了WebStorm上面了。经过这么三四个月的使用,发现虽然功能强大,但是我依然觉得繁琐,电脑性能问题,并不容易很好的支持超大项目的处理,这个时候Sublime的优势再一次得到展现,处理大量文件毫不费力。

我试图将IDE改成Atom,毕竟这东西是github自家产物,但却不知道为何我迟迟没有进行这一项操作。我想我应该总有一天会使用这一款颇受好评的代码编辑工具的吧。vim这个应该也是差不多,因为现在并没有过多的接触后台操作,也不太习惯纯粹的命令行操作方式,希望以后能有机会成为传说中的vim重度依赖者吧。现阶段的我最多就是在bash里面运行几个简单的命令。


之前也不知道为什么,我写markdown的工具都是打开的brackets,这个跟之前sublime的markdown插件的预览带进了巨坑是有一定关系的,至今不想再跳进去,索性就换了个编辑markdown的工具,挑来挑去,最后就是选择了brackets,仅仅是因为其界面的优雅。

其实,现阶段的我依然是各路编辑器和IDE混用的,因为有时候同一个项目要被各种查看,一个IDE并不能胜任,于是就出现了我同时打开了WebStorm、Atom、Brackets、Notepad++、Sublime,甚至还搬出了多年不再使用的UltraEdit,是的,它们同时打开了同一个项目。我都不敢想象为什么我会变得如此疯狂。

既然是要采用Brackets作为近阶段的IDE,那么就安装几个插件来让它如虎添翼吧。官方推荐的插件,我安装了几个自己认为重要的,现在我自己的电脑上的Brackets插件的安装情况大概是这个样子的:

  • brackets-beautify,官方推荐,代码美化工具,是的,格式化之后的代码很美!
  • brackets-display-shortcuts,显示快捷键列表的插件,安装好之后在帮助菜单里面执行,就可以看到当前所有的快捷键了。
  • brackets-emmet,是的,这就是本文要提到的核心插件,一个快速写HTML代码的工具,那速度绝对快的飞起。
  • brackets-indent-guides,显示缩进的指示线。简单又粗暴,绝对是深度依赖者的必装插件。
  • brackets-minimap,当初是因为什么爱上了sublime?没错,就是因为有代码缩略地图。基本上现在用一款编辑工具,首先会去看看没有代码小地图工具,有的话先装起来再说。
  • pop-up-menu,这是一个对编辑的工作区域内的右键菜单进行提升的插件,增加了一些便利性操作。
  • exclude-folders,打开文件夹时,过滤指定文件夹的插件。过滤了node_modules文件夹之后,项目的打开速度得到了明显的提升。但是看不到node_modules文件夹还是总觉得有点欠缺的。
  • markdown-preview,markdown预览插件。作为一个重度markdown使用者,这插件对我来说也是极好的。
  • file-icons,简单粗暴,给打开的各路文件的前面显示一个图标。优雅美观说的就是这样的效果。
  • monokai-theme,Sumline Text的爱好者对这个那必须是钟爱莫名的,非常精致的代码配色方案。
  • color-palette,取色器,好用不解释。

嗯,这些插件的安装其实并不是顺利,因为有强大的GFW的存在,悲催的brackets因为调用了aws的资源,所以有时候那速度卡的飞起,所以大部分插件我都是通过github的zip链接进行安装的。

安装完毕了之后,慕名已久的emmet插件一直不肯工作,这到底是为什么?

可能是因为疏忽大意了,一直迟迟忘记了brackets是基于HTML/JS构建出来的编辑工具,其界面上面是自带了Chrome DevTools的。为了这个问题,我几乎是找遍了brackets、emmet、stackoverflow上面的所有资源,依然是没有解决这个问题,后来又想,干脆手动安装一次,完全的纯粹的手动方式:

  1. 进入brackets的插件目录,我的是win10环境,所以在C:\Users\xovel\AppData\Roaming\Brackets\extensions这里。
  2. 进入user文件夹,打开bash。
  3. 在bash里面执行git clone操作。
  4. clone完成之后进入插件目录brackets-emmet,继续执行依赖安装操作npm install
  5. 安装完毕之后会发现,目录下多了个node_modules文件夹。
  6. 进去一看,里面有两个文件夹,分别是emmetcaniuse-db
  7. 不管那么多,重启brackets。

很遗憾,依然没有emmet功能。

几经周折,我终于看到了调试里面的开发工具,于是调出F12,看看到底是什么错误导致的。

果不其然,在控制台里面有一行错误提示:大意是缺少一个文件,这个文件就是\brackets-emmet\node_modules\emmet\lib\caniuse.json,我仔细去看了一遍,确实是没有这个文件。

这就比较尴尬了,会不是我这样的安装方式不对?我决定到一个全新的地方使用命令行的方式从npm上安装全新的emmet,使用npm install emmet命令之后,我竟然又执行了npm install,把emmet的开发依赖给安装了,甚至还跑了gulp任务,结果生成了一个dist文件夹,我感觉我这么做有点走弯路了,是的,确实是走弯路,弯的很厉害。不过看到dist下的emmet.js大小有1868kb的时候心里还是很是震惊的。

依然没有看到caniuse.json,我就在想,这个名字跟上面提到的caniuse-db,应该是存在着某种关联的吧。果不其然,上emmet的repo上一搜,发现一个提交记录被接受了,就是提议将caniuse.json换成caniuse-db的。好家伙,这就很尴尬了。

既然现在的版本已经被替换掉了,那么问题就相对来说简单了,我应该只需要找到这个缺失的文件并将它放到它应该出现的位置上就可以了。于是我通过repo的tag记录依次寻找,发现从1.3.2之后,这个caniuse.json就不见了踪影。也是说从1.4.0版本开始,丢弃了caniuse.json,改为使用caniuse-db进行可用性判定。

于是我复制了一份json到本地目录中,然后重启brackets,甚好,Emmet菜单出来了。而后打开一个html文件,飞速敲下div>ul>li,然后按下tab,一个良好缩进展现的HTML结构跃然纸上。

问题解决了,但我觉得应该不止我一个人被这个问题所困扰,后来我仔细看了一下brackets-emmet的插件的package文件,发现里面只有一个依赖:"emmet": "^1.3.0"。好家伙,竟然是"^1.3.0"

^!!

让我说什么好呢?这语义化的版本控制机制,应该是被npm给更改了操作规则吧。因为安装出来的版本号显示的是1.6.2,这明显不科学。

于是我手动将这一行代码改成了:"emmet": "1.3.0",然后将整个node_modules个删了,并在bash里面重新走了一边安装的操作,这个时候出来的结果是只安装了一个emmet了。怀着一颗激动的心,我重启了brackets,嗯,甚好,Emmet还在。

至此,brackets上的emmet插件算是成功解决了。


总结:瞎折腾之下,获取了宝贵的经验,也算是一种收获。虽然内心觉得得不偿失

毕竟,这个点了,也该去睡觉了……

[blog]记录 - 近期准备开始找工作了

估计是没有多少时间来更新博客。

已经有差不多十多天没有更新博客了。等找到了工作了之后再继续更新博客吧。

关于前路,其实我是迷茫的。不过我相信,这种迷茫现在只是短暂的。

[hexo]使用 - 避免正文中出现跨级标题结构

因为hexo在处理目录生成的时候调用的底层代码来自于一个叫做cheerio的插件,该插件不能愉快的处理跨级标题的情况

目录的具体代码在...\node_modules\hexo\lib\plugins\helper\toc.js

'use strict';

var cheerio;

function tocHelper(str, options) {
  options = options || {};

  if (!cheerio) cheerio = require('cheerio');

  var $ = cheerio.load(str);
  var headings = $('h1, h2, h3, h4, h5, h6');

  if (!headings.length) return '';

  var className = options.class || 'toc';
  var listNumber = options.hasOwnProperty('list_number') ? options.list_number : true;
  var result = '<ol class="' + className + '">';
  var lastNumber = [0, 0, 0, 0, 0, 0];
  var firstLevel = 0;
  var lastLevel = 0;
  var i = 0;

  headings.each(function() {
    var level = +this.name[1];
    var id = $(this).attr('id');
    var text = $(this).text();

    lastNumber[level - 1]++;

    for (i = level; i <= 5; i++) {
      lastNumber[i] = 0;
    }

    if (firstLevel) {
      for (i = level; i < lastLevel; i++) {
        result += '</li></ol>';
      }

      if (level > lastLevel) {
        result += '<ol class="' + className + '-child">';
      } else {
        result += '</li>';
      }
    } else {
      firstLevel = level;
    }

    result += '<li class="' + className + '-item ' + className + '-level-' + level + '">';
    result += '<a class="' + className + '-link" href="#' + id + '">';

    if (listNumber) {
      result += '<span class="' + className + '-number">';

      for (i = firstLevel - 1; i < level; i++) {
        result += lastNumber[i] + '.';
      }

      result += '</span> ';
    }

    result += '<span class="' + className + '-text">' + text + '</span></a>';

    lastLevel = level;
  });

  for (i = firstLevel - 1; i < lastLevel; i++) {
    result += '</li></ol>';
  }

  return result;
}

module.exports = tocHelper;

以上是toc.js的全部代码,可以看到在生成目录的时候使用了headings.each(function() {})这样的代码,那么在each遍历的时候如果出现跨级标题,就会产生一个断裂操作,跨级标题后面的部分将会跳出三界外不在五行中,于是就另起炉灶了。

避免出现跨级标题,可以有效杜绝这个问题的出现。

[blog]记录 - git bash中运行git log之后的退出方式

在输入git log命令查看历史记录之后,按ctrl+c的方式并不能直接退出当前显示。

那么,正确的姿势是直接键入q,无须回车,直接退出显示。

其实,同样的,在一些显示过长的命令中,也可以使用这种方式直接退出当前显示任务。

[blog]记录 - 对中英文混写的文章或者日志将采用严格的空格排布方式

具体的规范文档,会找个时间统一进行梳理,梳理完成之后会公布出来。

总纲就是针对中英文同时出现的文档,按照段落的方式,以中文为主的段落,统一采用中文的排版方式,标点统一使用中文标点,出现英文或者数字的地方,使用英文空格隔开(除标点边界)。

纯英文段落,则采用英文排版方式。

通常情况下,无论是中文还是英文段落,开头的缩进不做任何处理。

写作的主要文档方式为 markdown 格式,保持与 github 现用的风格一致。

[next]效果 - 调整首页文章列表的间距

这个文件里面:...\source\css\_schemes\Mist\_posts-expanded.styl,具体代码如下:

...
.posts-expand {
  padding-top: 0;

  .post-title,
  .post-meta {
    text-align: $site-meta-text-align;
    +mobile() { text-align: center; }
  }
  .post-eof { display: none; }

  .post { margin-top: 120px; }
  .post:first-child { margin-top: 0; }

  .post-meta {
    margin-top: 5px;
    margin-bottom: 20px;
  }
...

核心代码是这两句:

  .post { margin-top: 120px; }
  .post:first-child { margin-top: 0; }

第一句是每个article(article标签的类名是post)的上边距,你修改这个数值就行了。
第二句是取消第一个文章的上边距。


整体的外边距也是可以调的,具体位置在:...\source\css\_schemes\Mist\outline\outline.styl

.main-inner { margin-top: 80px; }

本人的博客暂未进行修改

[blog]记录 - github 提交时出现 22 错误的解决方案

简单又粗暴的解决方式,简直深得我心

将以下代码保存成config文件,放到ssh目录下去,windows系统一般在用户目录下的.ssh文件夹下面。

    Host github.com
    User git
    Hostname ssh.github.com
    PreferredAuthentications publickey
    IdentityFile ~/.ssh/id_rsa
    Port 443

不要问我为什么知道,我去搜了这里才知道的:

[marked]使用 - 文章内链接带括号`(`/`)`的处理

因为markdown语法的固有缺陷,在使用行内语法添加带圆括号(/)的链接时,会出现无法正确解析的情形。

在不更改markdown解析工具marked的前提下,这里提供两种处理方式:

  • 使用HTML URL Encoding字符进行替代
  • 改为定义链接的方式

HTML URL Encoding,就是将圆括号使用HTML的URL编码字符进行替换:(替换为%28)替换为%29

定义链接,即使用链接声明定义的方式编写markdown代码。

- [Regular Expression Syntax - 微软官方正则表达式参考][msreg]
[msreg]: https://msdn.microsoft.com/zh-cn/library/ae5bf541(v=vs.100).aspx

marked工具在解析链接的时候,对行内链接带圆括号的情况并未做处理,并且这样的情况也不是很方便进行处理,算是一个刚性BUG吧。

[blog]记录、博客结构微调。

有些事情,已经逝去。hedy 目录将被移除。原本规划的宏大版图,终究是个可笑的决定,奈何不了这现实,只好永远掩藏起来。那曾经内心的悸动,如今徒留感叹。风烟一过,竟不再有痕迹。

跟随而来的改动,目前未定。

有一个关键字:琪。

[blog]记录 - 发布npm包时遇到的一个问题

原本是要写一个日志的,但是端午节放假,不准备写关于技术方面的日志,所以这一篇记录就放在这里来了。

刚刚在发布自己新建的一个项目时,碰到了一个问题。

在我键入npm publish命令之后,并没有发布成功,而是提示ENEEDAUTH错误。下面有提示说使用npm adduser添加用户信息即可。

于是键入,依次输入,结果并不对。仔细看log文件,发现里面的认证信息出现错误日志里面有这样一句:

verbose stack Error: unauthorized Login first: -/user/org.couchdb.user:xovel/-rev/undefined

咦,好像是认证出了问题,没仔细看,我就直接去改密码了。改好了密码之后,依然不对。于是我又仔细看了一下错误日志文件。里面有很多https://registry.npm.taobao.org/字样。

嗯,这不就是自己改的npm的注册库么?

是的。问题就是出在这里。淘宝提供的npm注册库可以加快获取npm包的速度,但是并不能愉快的发布npm包,毕竟,用户权限这一块还是不能做同步的。

毕竟,https://registry.npm.taobao.org/上面没有帐号体系,自然不能提供权限认证,也没有提供发布包的功能。

问题既然找到,那么解决起来就略显简单了:在发布操作进行之前,取消注册库的指定即可。

[marked]修改 - 支持任务列表

现有的markdown解析工具marked不支持任务列表,对此,做了一番改动,以使得任务列表得到相应的支持。

代码如下:

...
Renderer.prototype.listitem = function(text) {
  if (/^\s*\[[x ]\]\s*/.test(text)) {
    text = text
      .replace(/^\s*\[ \]\s*/, '<i class="fa fa-w fa-square-o"></i> ')
      .replace(/^\s*\[x\]\s*/, '<i class="fa fa-w fa-check-square-o"></i> ');
        return '<li style="list-style: none">' + text + '</li>';
  } else {
    return '<li>' + text + '</li>';
  }
  // 支持task-list
  // https://github.com/chjj/marked/issues/107

  // return '<li>' + text + '</li>\n';
};
...

[hexo]配置 - 新建文档时的命名方式

在博客根目录下的_config.yml中找到new_post_name行,将其值设为命名的方式即可。默认值为:title.md

本博客采用年月日加名字进行命名,方便后期维护。
new_post_name: :year-:month-:day-:title.md

[hexo]升级 - 解决 fs.SyncWriteStream 废弃引发的警告

node v8 发布之时,明确表示 fs.SyncWriteStream 这个 API 被标识为 deprecatednode#10467

hexo 命令执行的时候,命令行会给出一个这样的警告:

(node:16132) [DEP0061] DeprecationWarning: fs.SyncWriteStream is deprecated.

为修复强迫症,需要对工具进行升级了。同时也顺便更新一下全局的 hexo-cli

然而,执行了 npm update 之后,貌似没什么效果。

一经翻阅之下,发现有一个叫做 hexo-fs 的项目调用了 fs.SyncWriteStream有趣的是,实际上这个引用已经没有太大的意义了,因为后面没有使用到

然而,执行了 npm update hexo-fs --save 之后依然没有用。

那么,问题就只有一个了,还有其他插件用到了这个被废弃的 API。

是的,这个帖子里面有提到:hexo#2598

再更新这两个插件就可以解决报警告的问题了:

npm install hexo-deployer-git hexo-server --save

[blog]记录 - git提交又乱码了……

好尴尬,刚才去新建的moonlight项目下面提交代码,提交说明里面填了一些中文,结果push上去之后拉出来的提交说明变成了乱码,然后又在本博客的源码分支上提交了一次,添加了新写的三篇文章,也是用的中文,结果也是乱码

以前不是解决好了这个问题了么?如今怎么出现了?

之前的文档有误,现在也不深究了,解决问题吧:

关于git中文乱码,通常有三个场景:

  1. git bash控制台里面的命令乱码,如ls,git log等
  2. git GUI乱码
  3. git GUI提交到远程仓库后,远程仓库显示的是乱码

第一个,ls命令,显示中文文件夹或文件时乱码,解决方案:找到git安装目录下的etc\git-completion.bash文件,在最末位加上这一句即可:

alias ls='ls --show-control-chars --color=auto'

当然,还有全局设置的方式,但这里并不推荐,所以机不做介绍了。

针对git log命令,对git记录说明中的中文显示为方块乱码的解决方案:在用户目录下找到git的配置文件.gitconfig,在[i18n]项目(如果没有可自行新建)下,设定一个属性:logoutputencoding = utf-8

建议通过命令行的方式进行设置:

git config --global i18n.logoutputencoding utf-8

至于GUI的乱码问题,可以直接在GUI的界面上右键,在弹出的菜单中选择编码方式,指定为utf-8即可。也可以通过命令行进行设置:

git config --global gui.encoding utf-8

对于git提交说明乱码,将提交的文本编码方式指定为utf-8即可。

git config --global i18n.commit.encoding utf-8

之前不知道哪一份文档,说要显示git log的提交说明为中文,将i18n.logoutputencoding设置为gbk即可。这是一个误导!

总结

在用户根目录下的.gitconfig文件中,确保以下设置存在:

[gui]
	encoding = utf-8
[i18n]
	commitencoding = utf-8
	logoutputencoding = utf-8

上面的三个设置项对应的git命令行语句为:

git config --global gui.encoding utf-8
git config --global i18n.commit.encoding utf-8
git config --global i18n.logoutputencoding utf-8

要想让ls命令支持显示中文,对ls命令做一个别名,将其重定向为ls --show-control-chars --color=auto即可让ls命令显示含中文名的文件夹或文件了。


不要再问为什么要改成utf-8格式了,谁让Linux的默认编码就是utf-8呢?更何况windows系统下的默认文本编码并非utf-8,有许许多多的转码问题,所以,直接指定一种编码,更方便多操作系统的兼容性。

[next]配置 - 指定个人头像

本博客采用主题NexT.Mist

在主题目录下的配置文件_config.yml中找到avatar,修改其值即可。

avatar: /images/xovel.jpg

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.