「实例教程篇」应用GitHub+Hexo构建本人静态数据

嗨,大伙儿好,这期是应用GitHub+Hexo构建本人静态数据blog第3期了。关键是有关怎样写blog,怎样配搭图文,怎样提交布署blog。

有关怎样写blog,Hexo适用Markdown,因此能够用以前我共享的Markdown编写器——Typora。不知道道的盆友记得去看我以前的文章内容。

OK!那空话很少说,刚开始吧。

实例教程:

1.最先在blog文档夹(有关blog文档夹上1期早已建立好了)里的根文件目录或在根文件目录里进到source文档夹,再进到_posts文档夹,这个文档夹上期也详细介绍了,关键便是储放blog的文章内容。我这里在 _posts里开启Git。记牢之后开启Git全是这样,后边已不叙述。

2.建立新blog文章内容指令:

hexo new "文章内容题型"

我这里随意举例。

3.能够看到在_posts文档夹中建立了.md文件格式的Markdown文档。

可是这儿有个难题:

資源(Asset)意味着 source 文档夹中除文章内容之外的全部文档,比如照片、CSS、JS 文档等。比如说,假如你的Hexo新项目中仅有小量照片,那最简易的方式便是将它们放在 source/images (source文档夹中沒有images的话新建1个)文档夹中。随后根据相近于 ![](/images/image.jpg) 的方式浏览它们。

可是,能想的到,1旦写的文章内容多了,照片多了,你把全部的照片都放到1个文档夹里,那梳理起来可能十分不便。麻烦于管理方法blog文章内容和照片。

大家期待的是在新建.md文档的另外能在_posts文档夹中创建1个和.md文档同名的文档夹,用来储放这1个.md博文的照片。这样就便于管理方法了。

4.以便处理上述难题,Hexo也出示掌握决计划方案。

开启blog配备文档_config.yml。上1期也说过开启方法。

5.寻找:

post_asset_folder: true

默认设置应当是false,改成true,留意冒号和true之间有1个空格,别删。

以后储存。

6.设定好后再新建.md文档(新建指令前面已有,以后已不赘述),发现_posts文档夹中出現了同名的文档夹和.md文档。考虑大家的要求。有助于更好的机构blog。之后便可以把这篇博文的照片放在同名文档夹里。

7.这里我再强调1下,我以前共享的那个Markdown编写器——Typora。

记得在设定里勾选照片相对性相对路径。

不然blog提交布署后照片无法显示,我就吃过亏。

8.以后开启.md开展博文撰写。插进同名文档夹里的照片能够看到相对路径是相对性相对路径。

9.记得把有关这篇博文的有关照片都储放在同名的文档夹里。

10.以后再公布,我在这里总结1下常见的指令。

hexo new "name" # 新建文章内容hexo new page "name" # 新建网页页面hexo g # 转化成网页页面hexo d # 布署hexo g -d # 转化成网页页面并布署hexo s # 当地预览hexo clean # 消除缓存文件和已转化成的静态数据文档hexo help # 协助

公布的情况下能够用这几条:

hexo clean # 消除缓存文件和已转化成的静态数据文档hexo g # 转化成网页页面hexo s # 当地预览hexo d # 布署

hexo clean 和 hexo s没必要每次都用,可是hexo g和hexo d每次布署都要用到。

以后已不赘述这些常见的指令哈。

公布进行后假如blog网页页面还没升级能够细心等候1下再浏览blog网站地址。

我公布上去的以下图,可是发现了1个难题,能够看到照片沒有提交。就连当地预览都沒有照片。

这个难题看下1步。

11.致使这个难题的缘故有许多,可是假如依照我的实例教程1步1步走的,应当遇到的难题和我1样,那末处理方式也类似。

我这个处理方式来源于于csdn。谢谢这位老哥,网站地址附上:

https://blog.csdn.net/xjm850552586/article/details/84101345

我这个难题处理方式是必须1个软件,Git键入指令:

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

可是这个软件的內容必须改动,要不然会出現Bug。

改动以下:

开启/node_modules/hexo-asset-image/index.js,将內容拆换为下面的编码。

要说的1点便是,每次变更內容前最好是备份数据1下,以防变更后有难题想回去都回不去。这1点很关键。

'use strict';var cheerio = require('cheerio');// http://stackoverflow.com/questions/14480345/how-to-get-the-nth-occurrence-in-a-stringfunction 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(); } }});

变更储存后再次消除缓存文件提交,能够看到照片能够显示信息出来了,提交后细心等候,或多更新。

OK!那本期有关博文提交布署这些实例教程就到此为止。下期共享有关变更主题,也有1些其它配备的实例教程。喜爱的话记得打卡适用大管家小e哦!!!

制做实例教程不容易,以上实例教程均为大管家小e原創,请勿运送,转载请注明来源于,如有不正确,请纠正,感谢。

·end·

大管家小e

你身旁的电脑上大管家



扫描二维码分享到微信