之前我已经写了一篇文章详细的讲述了如何使用hexo搭建github博客。如果还没有看的可以去看看,hexo搭建博客

其实,根据这篇文章的过程我们就能够搭建一个专属于自己,并且非常美观的博客了。但是如果你像我一样喜欢折腾,喜欢做到极致,比如添加打赏,添加文章导航,以及文章阅读次数,这些都很简单,按照主题文件的模版一点点修改,就能实现自己想要的效果了。

这篇文章主要记录我折腾的两个功能: 相册独立域名

相册

首先,看看我们实现后的效果,点这里看我的相册

分析

然后我们分析一下,想要获取相册图片,首先得拿到图片得线上地址,其次,我们可以想到,既然我们的博客内容都放在了github得服务器,那么图片又何尝不能呢?

使用hexo搭建博客的同学都知道,github上会建立一个名为username.github.io的仓库,而且仓库只存储了整个项目的一部分(source文件夹的内容),而且貌似这个仓库有大小限制,总之就是说不能把图片放在这个仓库里。

我们再考虑另一个问题,假如我们有一天需要在另一台电脑写博客怎么办?所以博客备份就是需要的了。那么好,我们在Github 上再建一个仓库,用来存储整个博客项目的文件,假如某一天换个环境,直接全部down下来,就能拿到所有文章的源文件了,所以正好,我们可以在根目录下新建一个photos文件夹用来存放相册需要展示的图片文件了。

ok,分析结束,敲定技术方案:

我们新建文件夹photos用来存放图片文件,然后新建一个基于nodejs的js文件用来读取所有图片再生成一个json接口文件供相册页面的js文件使用。

存放照片

在博客的根目录下创建一个photos的文件夹,里面存放你想要展示的照片文件。然后把整个项目部署到github上,才能访问到图片的线上地址。

生成json文件

在根目录下创建一个nodejs文件tool.js,内容如下:

"use strict";
var fs = require("fs");
var path = "./photos/";
fs.readdir(path, function (err, files) {
if (err) {
return;
}
var arr = [];
(function iterator(index) {
if (index == files.length) {
fs.writeFile("./source/photos/data.json", JSON.stringify(arr, null, "\t"));
console.log('get img success!');
return;
}
fs.stat(path + files[index], function (err, stats) {
if (err) {
return;
}
if (stats.isFile()) {
arr.push(files[index]);
}
iterator(index + 1);
})
}(0));
});

运行这个文件node tool.js,运行之后,会在/source/photos/目录下创建一个data.json文件,内容如下:

[
"IMG_0011.JPG",
"IMG_0019.JPG",
"IMG_0020.JPG",
"IMG_0022.JPG",
"IMG_0045.JPG",
"IMG_0099.JPG",
"IMG_0106.JPG",
"IMG_0191.JPG",
"IMG_0306.JPG",
"IMG_0438.JPG",
"IMG_0451.JPG",
"IMG_0648.JPG",
"IMG_0670.JPG",
"IMG_0842.JPG",
"IMG_1078.JPG",
"IMG_1239.JPG",
"IMG_1429.JPG",
"IMG_1634.JPG"
]

每次修改photos文件夹里的照片,都得运行一下这个js文件,以更新生成的data.json文件。

创建相册页面

在根目录下执行命令:

hexo page photos

会在source/photos目录下生成一个index.md文件,编辑文件内容如下:

<link type="text/css" href="/fancybox/jquery.fancybox.css" rel="stylesheet">
<div class="instagram">
<section class="archives album">
<ul class="img-box-ul"></ul>
</section>
</div>

修改themes/yilia/js/photo.js

...
init: function () {
var that = this;
$.getJSON("/photos/data.json", function (data) {
that.render(that.page, data);
that.scroll(data);
});
},
render: function (page, data) {
var begin = (page - 1) * this.offset;
var end = page * this.offset;
if (begin >= data.length) return;
var html, li = "";
for (var i = begin; i < end && i < data.length; i++) {
li += '<li><div class="img-box">' + '<a class="img-bg" rel="example_group" href="https://raw.githubusercontent.com/jarson7426/blog-back-up/master/photos/' + data[i] + '"></a>' + '<img lazy-src="https://raw.githubusercontent.com/jarson7426/blog-back-up/master/photos/' + data[i] + '" />' + '</li>';
}
$(".img-box-ul").append(li);
$(".img-box-ul").lazyload();
$("a[rel=example_group]").fancybox();
},
...

上述文件读取json文件,将图片的线上url拼接起来渲染在页面上,相册样式使用yilia主题提供。然后上传这些文件,根据自定义的路径访问url,就能看到相册了。那么,到这里就基本完成了相册的制作。

独立域名

到目前为止,我们的博客都是使用github分配的二级域名luckykun.github.io来访问的, 那么我们会想如果能自己设置个域名,是多么cool的事!要怎么办呢?那就继续往下看吧!

购买域名

去卖域名的网站去买一个域名,我是在万网买的域名,如图所示:

找到自己喜欢的域名,购买就好了。

域名解析

有了自己的域名之后,luckykun.github.io替换成luckykun.com,只要设置下解析即可,进入万网的云解析页面,添加如下解析:

说明:192.30.252.154192.30.252.153是github服务器对应的ip地址,这步一定要设置,否则访问不了。

添加CNAME

然后回到博客项目根目录,在source/下新建一个名为CNAME的文件,里面的内容写入luckykun.com即可。

然后在浏览器输入luckykun.com,即可代替之前的github.io的域名,访问到自己的博客页面了。实在是台、太cool了!

结语

好的,文章写道这里就结束了,感谢大家的阅读,如果文章能给大家带来帮助就最好了,如果读者还有任何疑问,欢迎留言,我会尽力解答。再见啦~~

hexo博客进阶-相册和独立域名的更多相关文章

  1. 【干货】2个小时教你hexo博客添加评论、打赏、RSS等功能 (转)

    备注:该教程基于Hexo 2.x版本,目前Hexo是3.x版本,照本教程实现有可能会出现404错误,笔者目前还未找时间去解决,待笔者找时间解决该问题后,再写一篇该问题的解决教程,给各位读者带来困扰,还 ...

  2. [还不会搭建博客吗?]centos7系统部署hexo博客新手入门-进阶,看这一篇就够了

    @ 目录 *本文说明 请大家务必查看 前言 首先介绍一下主角:Hexo 什么是 Hexo? 环境准备 详细版 入门:搭建步骤 安装git: 安装node: 安装Hexo: 进阶:hexo基本操作 发布 ...

  3. 关于hexo博客自定义域名后gitment评论系统登陆出现redirect error返回主页的解决办法

    title: 关于hexo博客自定义域名后gitment评论系统登陆出现redirect error返回主页的解决办法 toc: false date: 2018-04-16 22:57:50 cat ...

  4. hexo博客yilia主题深度设置

    转载:Shuyan http://dongshuyan.com/2019/05/24/hexo博客注意事项/ 1.微信分享异常 这里是themes\yilia\layout\ _partial\pos ...

  5. 如何优雅地发布Hexo博客

    前言 就目前而言,我所知道的发布Hexo的博客有如下几种: 1.原始方式,也就是在服务器上编写md文件,然后利用hexo g来生成,详见:hexo从零开始到搭建完整: 2.利用github+hook来 ...

  6. hexo干货系列:(四)将hexo博客同时托管到github和coding

    前言 之前我们把hexo托管在github,但是毕竟github是国外的,访问速度上还是有点慢,所以想也部署一套在国内的托管平台,之前查资料听说gitcafe,但是听说gitcafe已经被coding ...

  7. 【基础篇】hexo博客搭建教程

    [基础篇]搭建hexo博客(一) 作者:Huanhao bilibili:Mrhuanhao 前言 你是否想拥有属于自己的博客?你是否无奈与自己不会写网站而烦恼? 不要担心,本系列教程将会实现你白嫖的 ...

  8. Hexo博客建设

    上次我教大家利用wordpress程序搭建个人网站,这次换个Hexo来搭建咱们的个人博客,那咱们开始吧!先提供官网给大家英文版的请点击这里,中文版的请点击这里,好了然后是工具要准备下,貌似就只要安装g ...

  9. [原创]HEXO博客搭建日记

    博客系统折腾了好久,使用过Wordpress,Ghost,Typecho,其中Typecho是我使用起来最舒心的一种,Markdown编辑+轻量化设计,功能不多不少刚好,着实让我这种强迫症患者舒服了好 ...

随机推荐

  1. Leetcode-268 Missing Number

    #268.  Missing Number Given an array containing n distinct numbers taken from 0, 1, 2, ..., n, find ...

  2. 【Win10应用开发】自定义桌面壁纸

    调用通用的API来设置桌面壁纸,是一件既简单又有趣的事情,结合XAML可以生成图像的特性,你甚至可以做一个应用,让用户用他所拍的照片做成一张自定义壁纸,然后作为桌面壁纸. 这个API是通用的,应用运行 ...

  3. 通过监控线程状态来保证socket服务器的稳定运行

    云平台中使用的socket服务器是我们自己定义一套通信协议,并通过C#实现的一个socket服务. 该服务目前是和web服务一起运行在IIS容器中,通过启动一个永不退出的新线程来监听端口. 在开发的初 ...

  4. Comet ASP.NET AJAX 示例

    最近公司有个项目,里面要求要用到Comet技术,所以就到网上找了一下相关的资料和文章,发现有些人说用Ajax的长轮询比较好,后来就百度了一下,发现comet貌似就是通过ajax演变而来的,也就是com ...

  5. Openfire/XMPP学习之——一个简单的Smack样例

    昨天讲了Openfire的搭建和配置,今天来讲一下Smack.如果对如何搭建和配置Openfire的,可以参考Openfire/XMPP学习之——Openfire的安装.配置. Smack是一个开源, ...

  6. css规范

    1 前言 CSS 作为网页样式的描述语言,在百度一直有着广泛的应用.本文档的目标是使 CSS 代码风格保持一致,容易被理解和被维护. 虽然本文档是针对 CSS 设计的,但是在使用各种 CSS 的预编译 ...

  7. EntityFramework DbContext 线程安全

    先看这一段异常信息: A second operation started on this context before a previous asynchronous operation compl ...

  8. 关于在用curl函数post网页数据时,遇上表单提交 type为submit 类型而且没有name和id时可能遇到的问题及其解决方法

    curl函数库实现爬网页内容的链接在 http://www.cnblogs.com/linguanh/p/4292316.html 下面这个是没有name和id 标识的 <input type= ...

  9. objective-c 语法快速过(3)

    oc 里的匿名对象 oc 这里,很少用到,因为并不适用于oc的内存管理,只是面试笔试也许出现,要求能看懂,不要在项目里这样写,因为写匿名对象,会造成内存泄露 #import <Foundatio ...

  10. iframe编程的一些问题

    前几天做一个用iframe显示曲线图的demo,发现对iframe的contentDocument绑定 onclick事件都无效,而在页面中对iframe.contentDocument的onclic ...