Next -24- 添加相册系列 -4- 将本地相册信息部署到hexo

2022-08-04 14:39:37 浏览数 (1)

在之前基础工作完成后，来到了距离我们相册最接近的一步，本文介绍上线相册的一种思路，供大家参考。

准备工作

  • Next -21- 添加相册系列 - 1- 框架设置
  • Next -22- 添加相册系列 -2- 使用七牛云qshell同步图像目录
  • Next -23- 添加相册系列 -3- 获取图像信息、保存为json文件并上传图像

上线思路

现在我们已经有了基础的photos框架，图像文件夹已经整理完毕，提取了信息放在了json文件，并且将图像上传到了七牛云图床，在hexo source文件夹内创建了相册对应index.md 和json文件。仅需要将这些串联起来，部署到hexo即可。

  • 在next主题中存在为二级文件夹配置内容的文件，修改该文件，在具有二级文件夹结构的index.html中加入特定类
  • 建立js文件向类中添加内容
  • 内容为读取json文件得到的相册信息，这样便建立起了逐个页面的相册
  • 同理在photos中加入特定类
  • 建立js文件读取相册json文件并建立链接目录，即完成了整个相册的基础框架
  • 之后的优化、美化便水到渠成了

建立相册

向二级目录的index.html加入类

在 Hexo/themes/next/layout/_partials/page文件夹中 修改page-header.swig文件，加入类别为album_image_grid的div，并引用js文件，此时对应的二级文件夹内的index.html中便多了一个空div

代码语言：javascript复制
<header class="post-header">

<{%- if theme.seo %}h2{% else %}h1{%- endif %} class="post-title" itemprop="name headline">
  {{- page.title }}
  {{- post_edit(page.source) }}
</{%- if theme.seo %}h2{% else %}h1{%- endif %}>

<div class="post-meta">
  {%- if page.description %}
    <div class="post-description">{{ page.description }}</div>
  {%- endif %}

	{%- if page.type == 'photography' %}
	  
	  <div class="album_image_grid">

	  </div>
	  <script src="//cdn.jsdelivr.net/npm/jquery@3/dist/jquery.min.js"></script>
	  <script type="text/javascript" src="/photos/album.js"></script>

	{%- endif %}
  {% include '_partials/page/breadcrumb.swig' %}
</div>

</header>

​

​

​

建立album.js文件

在Hexo/themes/next/source/photos文件夹内建立相册js文件 album.js，写入如下内容：

代码语言：javascript复制
console.log('album js Hello World')

photo ={
    page: 1,
    offset: 20,
    init: function () {
        var that = this;
        $.getJSON("readme.json", function (data) {
            that.render(that.page, data);
            //that.scroll(data);
        });
    },
    render: function (page, data) {
    	var year = data["time"]["year"]
    	var month = data["time"]["month"]
    	var day = data["time"]["day"]
    	var type = data["type"]
    	var model = data["model"]
    	var city = data["position"]['city']
    	var street = data["position"]['street']
    	var title = data["title"]
    	var balabala = data["balabala"]

    	var image_info_list = data["image_info"]
    	console.log(image_info_list[0]["Image_Model"])

    	console.log(year)
        //var begin = (page - 1) * this.offset;
        //var end = page * this.offset;
        //if (begin >= data.length) return;
        var html, imgNameWithPattern, imgName, imageSize, imageX, imageY, li = "";

		$(".album_image_grid").append('<br>');
		$(".album_image_grid").append('<br>');

        for (var i = 0; i < image_info_list.length ; i  ) {
        	sub_image = image_info_list[i]
        	nbsp = "&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp"
        	href_str = ""

        	image_model = sub_image["Image_Model"] //相机型号
        	if (image_model!="")
        	{
        		href_str = href_str '相机：' image_model nbsp
        	}

        	EXIF_fnumber = sub_image["EXIF_FNumber"] //光圈	
        	if (EXIF_fnumber!="")
        	{
        		href_str = href_str ' 光圈：'  EXIF_fnumber  nbsp
        	}

        	EXIF_FocalLength = sub_image["EXIF_FocalLength"] //焦距
        	if (EXIF_FocalLength!="")
        	{
        		href_str = href_str ' 焦距：'  EXIF_FocalLength  nbsp
        	}

        	EXIF_exposureMode = sub_image["EXIF_ExposureMode"] //曝光模式
        	if (EXIF_exposureMode!="")
        	{
        		href_str = href_str ' 曝光模式：'  EXIF_exposureMode  nbsp
        	}		

        	EXIF_exposureTime = sub_image["EXIF_ExposureTime"] //曝光时间
        	if (EXIF_exposureTime!="")
        	{
        		href_str = href_str ' 曝光时间：'  EXIF_exposureTime  nbsp
        	}	

        	EXIF_ISOSpeedRatings = sub_image["EXIF_ISOSpeedRatings"] //ISO
        	if (EXIF_ISOSpeedRatings!="")
        	{
        		href_str = href_str ' ISO：'  EXIF_ISOSpeedRatings  nbsp
        	}

        	image_url = sub_image["url"]

            li  = '<div class="card" style="width:100%">'  
                    '<div class="ImageInCard">'  
                      '<a data-fancybox="gallery" href="'   image_url   '?raw=true" data-caption="'   href_str  '">'  
                        '<img src="'   image_url   '?raw=true"/>'  
                      '</a>'   '<br>'  
                    '</div>'  
                    // '<div class="TextInCard">'   imgName   '</div>'  
                  '</div>'
        }
        $(".album_image_grid").append(li);
        //$(".album_image_grid").lazyload();
        //this.minigrid();
    },
    
}
photo.init();

​

此时访问某个二级目录的地址可以看到图像已经上线

​

​

建立相册目录

主题配置

在Hexo/themes/next/layout文件夹内，修改page.swig，在schedule的elif后面加入内容：

代码语言：javascript复制
{% elif page.type === 'schedule' %}
          <div class="event-list">
          </div>
          {% include '_scripts/pages/schedule.swig' %}
        
        {% elif page.type === 'photos' %}

           <div class="album_link_list">

           </div>
	   
	   <script src="//cdn.jsdelivr.net/npm/jquery@3/dist/jquery.min.js"></script>
	   <script type="text/javascript" src="https://unpkg.com/minigrid@3.1.1/dist/minigrid.min.js"></script>
	   <link rel="stylesheet" href="/photos/photos.css">
	   <script type="text/javascript" src="/photos/photo.js"></script>

        {% else %}
          {{ page.content }}
        {%- endif %}

​

在同文件夹内建立文件 photos.swig 写入内容

代码语言：javascript复制
{% extends '_layout.swig' %}
{% import '_macro/post-collapse.swig' as post_template with context %}
{% import '_macro/sidebar.swig' as sidebar_template with context %}

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

{% block content %}

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

      {{ post_template.render(page.posts) }}
    </div>
  </div>
  {#####################}
  {### END photos BLOCK ###}
  {#####################}

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

{% endblock %}
{{ page.date }}

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

​

建立photos.js文件

在Hexo/themes/next/source/photos文件夹内建立相册js文件 photos.js，写入如下内容：

代码语言：javascript复制
console.log('Photos js Hello World')

photo ={
    init: function () {
        var that = this;
        $.getJSON("album.json", function (data) {
            that.render(that.page, data);
            //that.scroll(data);
        });
    },
    render: function (page, data) {
        var album_list = data['album'];
        var html, imgNameWithPattern, imgName, imageSize, imageX, imageY, li = "";
        var link_profix = "/photos/"
        for (var i = 0; i < album_list.length; i  ) {

            album_info = album_list[i]

            dir_name = album_info["directory"]

            title = album_info["title"]
            /*console.log(album_info)
            imgNameWithPattern = data[i].split(' ')[1];
            imgName = imgNameWithPattern.split('.')[0]
            imageSize = data[i].split(' ')[0];
            imageX = imageSize.split('.')[0];
            imageY = imageSize.split('.')[1];*/
            li  = '<div>'  
                      '<a href="'  link_profix   dir_name   '/">'  
                          title   '<br>'   
                      '</a>'  
                    // '<div class="TextInCard">'   imgName   '</div>'  
                  '</div>'
        }
        $(".album_link_list").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();
        });
    }
}
photo.init();

​

此时便有了相册目录：

​

​

至此我们已经完成了相册的基础框架，美化等工作仅需在此基础上顺水推舟即可。

json javascript html hexo

0 人点赞