幸福的猪窝

由于Wordpress越来越笨重，在习惯使用Markdown后发现几次升级Wordpress对Markdown支持不太友好。遂决定更换Hexo。
文章的迁移过程比较顺利。最后图库好像默认情况下无法支持。于是只好自己动手。
本文主要参考了 asdfv1929的实现过程，稍作修改。
同时还有两个同样衍生自asdfv1929的文章也在此鸣谢：
如何在Hexo中实现自适应响应式相册功能
 Hexo NexT 博客增加瀑布流相册页面

我的主要实现思路

增加一个page的类型 gallery
修改Next的模板针对gallery数据调用工具类重新渲染页面。使用minigride生成瀑布式布局
调用lazyload 和
增加模板支持新建文章时默认支持

实现过程

修改next模板内容支持 gallery 类型的页面。打开 themes/next/layout/_scripts 目录下的commons.swig文件。修改为如下内容。为了区分被注释部分是我添加的。主要目的是遇到gallery的页面添加minigrid.min.js 和 gallery.js 两个文件。

/*
{% if page.type ==='gallery' %}
{%
  set js_commons = [
    'utils.js',
    'motion.js',
    'minigrid.min.js',
    'gallery.js'
  ]
%}
{% else %} */

{%
  set js_commons = [
    'utils.js',
    'motion.js'
  ]
%}
/*
{% endif %}*/

找到 themes/next/layout 目录复制一份tag.swig文件。重命名为 gallery.swig .

{% extends '_layout.swig' %}
{% import '_macro/post-collapse.swig' as post_template %}
{% import '_macro/sidebar.swig' as sidebar_template %}

{% block title %}{{ __('title.tag') }}: {{ page.tag }} | {{ title }}{% endblock %}

{% block content %}

  {#################}
  {### GALLERY BLOCK ###}
  {#################}
  <div class="post-block tag">

    <div id="posts" class="posts-collapse">
      <div class="collection-title">
        <{% if theme.seo %}h2{% else %}h1{% endif %}>{#
        #}{{ page.tag }}{#
        #}<small>{{ __('title.tag') }}</small>
        </{% if theme.seo %}h2{% else %}h1{% endif %}>
      </div>

      {% for post in page.posts %}
        {{ post_template.render(post) }}
      {% endfor %}
    </div>

  </div>
  {#####################}
  {### END TAG BLOCK ###}
  {#####################}

  {% include '_partials/pagination.swig' %}

{% endblock %}

{% block sidebar %}
  {{ sidebar_template.render(false) }}
{% endblock %}

创建gallery.js 和 gallery.css 定义相册样式和相册生成脚本。
gallery.css 保存路径：themes/next/gallery/

.ImageGrid {width: 100%;max-width: 1040px;margin: 0 auto; text-align: center;}
.card {overflow: hidden;transition: .3s ease-in-out; border-radius: 8px; background-color: #ddd;}
.ImageInCard {padding：1px 1px 1px 1px}
.ImageInCard img {padding: 0 0 0 0;}
.TextInCard {line-height: 54px; background-color: #ffffff; font-size: 24px;}

gallery.js 保存路径：themes/next/source/js
这个文件我修改比较大，主要原因是我使用VSCode写markdowd，使用七牛云存储保存图片资源。快速免费的CDN还有图片处理功能很不错。VSCode中有很好用的插件可以实现图片黏贴的同时上传到七牛，所以我这里也省掉了处理本地图片的逻辑，数据源的读取也进行了调整。

gallery = {
    page: 1, //未来支持分页。
    offset: 100, //offset 用于设置照片数量的上限
    init: function () {
        //初始化数据
        var data = [];
        //需要相册功能的页面需要把图片贴进去，再生成的时候会生成到 gallery-data的 div中然后遍历图片生成数组。
        $(".gallery-data").find("img").each(function (index, item) {
            data.push({ "src": item.src, "imageName": item.alt });
        });
        this.render(this.page, data);
    },
    render: function (page, data) {
        var begin = (page - 1) * this.offset;
        var end = page * this.offset;
        if (begin >= data.length) return;
        var html, imgNameWithPattern, imgName, imageSize, imageX, imageY, li = "";
        for (var i = begin; i < end && i < data.length; i++) {
            imgName = data[i].imageName;
            imgSrc = data[i].src + "-gallery"; //此处添加了七牛的图片处理功能，可以动态压缩缩略图提高访问速度。同时添加水印。
            //这里 250 指的是图片的宽度，可以根据自己的需要调整相册中照片的大小，我这里固定了图片的大小不会有瀑布式交错的效果。
            li += '<div class="card" style="width:250px">' +
                '<div class="ImageInCard" style="height: 250px">' +
                '<a data-fancybox="gallery" href="' + imgSrc + '" data-caption="' + imgName + '">' +
                '<img src="' + imgSrc + '"/>' +
                '</a>' +
                '</div>' +
                '<div class="TextInCard">' + imgName + '</div>' +  //图片下显示文件名作为说明的功能
                '</div>'
        }
        $(".ImageGrid").append(li);
        $(".ImageGrid").lazyload();
        this.minigrid();
    },
    minigrid: function () {
        var grid = new Minigrid({
            container: '.ImageGrid',
            item: '.card',
            gutter: 12
        });
        grid.mount();
        $(window).resize(function () {
            grid.mount();
        });
    }
}
gallery.init();

修改文件 themes/next/layout/page.swig 这里要自改两段第一段是 block title 部分中 page.type === “gallery”的两行是新加的。

{% block title %}{#
  #}{% set page_title_suffix = ' | ' + title %}{#

  #}{% if page.type === 'categories' and not page.title %}{#
    #}{{ __('title.category') + page_title_suffix }}{#
  #}{% elif page.type === 'tags' and not page.title %}{#
    #}{{ __('title.tag') + page_title_suffix }}{#
  #}{% elif page.type === 'schedule' and not page.title %}{#
    #}{{ __('title.schedule') + page_title_suffix }}{#
  
  #}{% elif page.type === "gallery" and not page.title %}{#
    #}{{ __('title.photos') + page_title_suffix }}{#

  #}{% else %}{#
    #}{{ page.title + page_title_suffix }}{#
  #}{% endif %}{#
#}{% endblock %}

第二部分在 PAGE Body 部分，同样也是 elif page.type === ‘gallery’部分是新加的。这里的

{% elif page.type === 'schedule' %}
  {% include 'schedule.swig' %}
{% elif page.type === 'gallery' %}
  {### 生成好的图片会在这里所为数据源 ###}
  <div style = "display:none" class="gallery-data">{{ page.content }}</div>
  {### 下面这个是相册的真实容器，gallery.js会进行处理把数据源的图片添加到这里。###}
  <div class="ImageGrid"></div>
{% else %}
  {{ page.content }}
{% endif %}

修改 themes/next/_config.yml 找到 Lazyload和 Fancybox的配置项分别启动

*1. 启用 lazyload

1
2
3

# Vanilla JavaScript plugin for lazyloading images.
# Dependencies: https://github.com/theme-next/theme-next-jquery-lazyload
lazyload: true

启用 fancybox

# Fancybox. There is support for old version 2 and new version 3.
# Choose only one variant, do not need to install both.
# To install 2.x: https://github.com/theme-next/theme-next-fancybox
# To install 3.x: https://github.com/theme-next/theme-next-fancybox3
fancybox: true

找到vendors部分对应的 Lazyload和Fancybox配置好cdn

配置 fancybox

# Internal version: 2.1.5 & 3.5.7
# See: https://fancyapps.com/fancybox
# Example:
# fancybox: //cdn.jsdelivr.net/gh/fancyapps/fancybox@3/dist/jquery.fancybox.min.js
# fancybox: //cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.6/jquery.fancybox.min.js
# fancybox_css: //cdn.jsdelivr.net/gh/fancyapps/fancybox@3/dist/jquery.fancybox.min.css
# fancybox_css: //cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.6/jquery.fancybox.min.css
fancybox: //cdn.jsdelivr.net/gh/fancyapps/fancybox@3/dist/jquery.fancybox.min.js
fancybox_css: //cdn.jsdelivr.net/gh/fancyapps/fancybox@3/dist/jquery.fancybox.min.css

配置Lazyload

# Internal version: 1.9.7
# See: https://github.com/tuupola/jquery_lazyload
# Example:
# lazyload: //cdn.jsdelivr.net/npm/jquery-lazyload@1/jquery.lazyload.min.js
# lazyload: //cdnjs.cloudflare.com/ajax/libs/jquery_lazyload/1.9.7/jquery.lazyload.min.js
lazyload: //cdn.jsdelivr.net/npm/jquery-lazyload@1/jquery.lazyload.min.js

配置结束

Hello World

发表于 2019-05-15 | 更新于 2019-05-16

Welcome to Hexo! This is your very first post. Check documentation for more info. If you get any problems when using Hexo, you can find the answer in troubleshooting or you can ask me on GitHub.

Quick Start

Create a new post

1	$ hexo new "My New Post"

More info: Writing

Run server

1	$ hexo server

More info: Server

Generate static files

1	$ hexo generate

More info: Generating

Deploy to remote sites

1	$ hexo deploy

More info: Deployment

升级Let’s Encrypt 免费SSL证书

发表于 2019-04-23 | 更新于 2019-05-16 | 分类于技术文章

Let’s Encrypt 开始支持通配符证书。

2018 年 3 月 14 日，Let’s Encrypt 对外宣布 ACME v2 已正式支持通配符证书。这就意外味着用户可以在 Let’s Encrypt 上免费申请支持通配符的 SSL 证书。免去了在证书中添加一大串证书的问题。

什么是 Let’s Encrypt

Let’s Encrypt 是国外一个公共的免费 SSL 项目，由 Linux 基金会托管。它的来头不小，由 Mozilla、思科、Akamai、IdenTrust 和 EFF 等组织发起，目的就是向网站自动签发和管理免费证书。以便加速互联网由 HTTP 过渡到 HTTPS，目前 Facebook 等大公司开始加入赞助行列。 Let’s Encrypt 已经得了 IdenTrust 的交叉签名，这意味着其证书现在已经可以被 Mozilla、Google、Microsoft 和 Apple 等主流的浏览器所信任。用户只需要在 Web 服务器证书链中配置交叉签名，浏览器客户端会自动处理好其它的一切，Let’s Encrypt 安装简单，使用非常方便。本文将会详细介绍如何免费申请 Let’s Encrypt 通配符证书。

什么是通配符证书

域名通配符证书类似 DNS 解析的泛域名概念，通配符证书就是证书中可以包含一个通配符。主域名签发的通配符证书可以在所有子域名中使用，比如 .example.com、bbs.example.com。

申请步骤

下载工具

wget https://dl.eff.org/certbot-auto
chmod a+x certbot-auto

申请域名

./certbot-auto certonly –email 邮箱 -d 域名1 -d 域名2 –manual –preferred-challenges dns –server https://acme-v02.api.letsencrypt.org/directory

参数说明： –email 你的电子邮箱 -d 域名你要申请证书的域名，泛域名使用 *.abc.com ，注意泛域名不可用于 abc.com所以你可能还需要再加一个 abc.com的域名。同一张证书可以申请多个。使用多个 -d 即可。不过后面认证信息也会有多次。 –manual 手动交互模式，需要中途中断添加一些域名解析设置。 –preferred-challenges dns 使用dns方式认证。此方式不需要你再配置本地服务器解析，访问路径等。只需要在DNS添加一条TXT解析记录即可。前面有几个 -d 就会需要配置几个。 –server 指定使用v02的服务器。次服务器支持泛域名。默认是v01的。执行命令后如果是第一次使用，会自动安装依赖项只需等待即可。安装好后会自动开始申请流程。中间需要用户交互的有三步： 1. 用户条款，直接输入A同意通过 2. 询问用户是否记录申请电脑的IP地址。输入 Y 同意通过。 3. 开始需要添加DNS解析内容，没申请一个域名就要添加一次。按要求添加即可。 4. 最后一个添加完后，稍等个一分钟，按回车就会开始验证流程。验证通过后就会完成签发流程。成功后会有提示信息告诉你你的证书文件保存路径。 3. 重新签发由于证书有效期只有3个月所系需要定时重新申请。只需要执行即可重新签发。不过签发浅会检查现在证书的有效期，没过期的不会重新签发。 ./certboot-auto renew

ORA-01950: no privileges on tablespace 'USERS'

发表于 2019-04-16 | 更新于 2019-05-16 | 分类于技术文章

错误代码：ORA-01950

创建用户后，重新指定了Tablespace，现象可以创建表但是无法插入数据。
原因没有分配配额解决方案：重新分配配额

不限制配额
ALTER USER user quota unlimited on tablespcae;
限制配额
ALTER USER user quota 100M on tablespcae;

多肉图谱--吉娃娃

发表于 2019-02-17 | 更新于 2019-05-16 | 分类于技术文章

吉娃娃

景天科拟石莲花属

原产于墨西哥奇瓦瓦州，花友习惯称呼为吉娃娃，因植株美丽，叶尖红晕颇有贵妃醉酒风韵，也有称呼为杨贵妃。吉娃娃，株型小巧，叶片呈非常标准的莲座状紧密排布，叶片卵形略包拢，顶端带小尖，小尖常红，叶片绿到蓝绿，略带白粉，秋冬低温季节，充分光照下，叶缘带红晕。吉娃娃，春季开花，穗状花序，花倒钟型，花瓣4-5出，黄红色。

多肉图谱--假日

发表于 2019-02-06 | 更新于 2019-05-16 | 分类于花园点滴

假日

景天科拟石莲花属

假日 Echeveria ‘Holiday’ 景天科拟石莲花属多肉植物，，韩文名字：홀리데이。假日植株莲座状，叶卵形，叶尖急尖，叶披粉，叶色青里透白，叶尖及叶前端叶缘易红。与吉娃娃很像，吉娃娃

解决 net::ERR_INCOMPLETE_CHUNKED_ENCODING 200 (OK) 错误

发表于 2019-01-02 | 更新于 2019-05-16 | 分类于技术文章

最近的一个项目在QA环境部署后界面突然渲染不正确。使用Chrome打开调试工具后显示一个jqueryEasyUI的一个组件初始化失败。意思是没有找到这个组件初始化的方法。

myOrdersAccepetcsbg:1350 Uncaught TypeError: $(...).combotree is not a function

在往上继续查看发现jquery easyui的js库没下载成功提示错误

net::ERR_INCOMPLETE_CHUNKED_ENCODING 200 (OK)

在网上搜索了之后发现可能是Nginx代理导致。具体原因是Nginx的临时路径权限出现问题，当Nginx需要些临时文件时出错导致问题。于是按照帖子记录找到Nginx安装路径，发现Nginx下的proxy_temp目录的权限配置确实有问题。使用命令统一修改目录权限，调整后重新刷新界面问题解决。注意下面的用户名和组名需要根据实际情况调整。我这里在Nginx的配置文件中设置的Nginx运行用户是 webserver 。

sudo chown webserver:webserver -R ./

Spring-Boot JPA使用记录

发表于 2018-12-27 | 更新于 2019-05-16 | 分类于技术文章

最近在使用Springboot JPA开发项目感觉在SpringBoot与JPA结合很融洽，使用过程中也发现了JPA的使用能节省不少时间。注解的使用也很方便。逐渐整理记录下来。这里做个目录

旅游

Hexo Next模板添加相册功能

我的主要实现思路

实现过程

Hello World

Quick Start

Create a new post

Run server

Generate static files

Deploy to remote sites

最新Axure RP 8.1.0.3382的授权码

升级Let’s Encrypt 免费SSL证书

Let’s Encrypt 开始支持通配符证书。

什么是 Let’s Encrypt

什么是通配符证书

申请步骤

ORA-01950: no privileges on tablespace 'USERS'

错误代码：ORA-01950

多肉图谱--吉娃娃

吉娃娃

景天科拟石莲花属

多肉图谱--假日

假日

景天科拟石莲花属

解决 net::ERR_INCOMPLETE_CHUNKED_ENCODING 200 (OK) 错误

Spring-Boot JPA使用记录

目录

我的主要实现思路

实现过程

Quick Start

Create a new post

Run server

Generate static files

Deploy to remote sites

Let’s Encrypt 开始支持通配符证书。

什么是 Let’s Encrypt

什么是通配符证书

申请步骤

错误代码：ORA-01950

吉娃娃

景天科 拟石莲花属

假日

景天科 拟石莲花属

目录

景天科拟石莲花属

景天科拟石莲花属