参考文章,小红鸡
参考文章,主题美化

效果展示:相册

blog文件夹/source下创建photos文件夹,在photos文件夹创建index.md文件,编辑index.md文件,写入以下代码:

<style type="text/css">

    .header-inner{
display: none;
}
.sidebar{
display: none;
}
.content{
margin-bottom: 360px;
}
.content-wrap{
width: 100%;
// box-sizing: content-box;
padding: initial !important;
background:url('https://s2.ax1x.com/2019/09/07/nlL4pR.jpg');
} .main-inner{
width: 100%;
}
.main {
padding-bottom: 150px;
margin-top: 0px;
background:url('https://s2.ax1x.com/2019/09/07/nlL4pR.jpg');
}
.main-inner{
margin-top: unset;
}
.page-post-detail .post-meta{
display: none;
}
body {
background-image: unset;
background-attachment: unset;
background-size: 100%;
/*background-position: top left;*/
}
.header{
background: rgba(28, 25, 25, 0.6);
border-bottom: unset;
}
.menu .menu-item a{
font-weight: 300;
color: #e6eaed;
}
.footer-inner {
padding-left: 0px;
} img:hover {
//opacity:0.8; /*透明度*/
//filter:alpha(opacity=100); /* For IE8 and earlier */
} .imgbox{
margin-top: 20px;
padding: 1px 10px;
width: 100%;
overflow: hidden;
height: 250px;
border-right: 1px solid #bcbcbc;
background:url('https://s2.ax1x.com/2019/09/07/nlL4pR.jpg');
}
.box{
visibility: visible;
overflow: auto;
zoom: 1;
}
.box li{
float: left;
width: 25%;
position: relative;
overflow: hidden;
text-align: center;
list-style: none;
margin: 0;
/*display: inline;*/
padding: 0;
height: 360px;
}
.box li span{
display: block;
padding: 12% 7% 10% 7%;
min-height: 80px;
//background: #fff;
color: #fff;
font-size: 16px;
font-weight: 600;
line-height: 26px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
} img.imgitem{
padding: unset;
padding: unset;
border: unset;
position: relative;
padding: 0px;
height: auto;
width: 100%;
} div#posts.posts-expand {
border: unset;
padding: unset;
margin-bottom: 10px;
}
.posts-expand .post-body img{
padding: 0px !important;
}
.box p{
margin-top: -25px;
display: block;
background: #121212;
color: #fff;
font-size: 14px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
text-align: center;
} .box span strong{
background: rgba(0,0,0,0.4);
padding: 20px;
} .posts-expand .post-title {
display: none;
} .title{
margin: 10px auto;
display: inline-block;
vertical-align: middle;
//background: url(/images/beichen.jpg);
font: 85px/250px 'ChaletComprimeMilanSixty';
//background-position: left bottom !important;
background-position: center center !important;
color: #fff;
background-size: 100% auto !important;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
width: 100%;
text-align: center;
border: unset;
height: 560px;
cursor: unset !important;
-webkit-box-sizing: border-box;
box-sizing: border-box;
} @media (max-width: 767px){
.box li {
width: 98%;
}
.title {
height: 200px;
} .box span {
min-height: 80px;
border-right: unset;
font-size: 17px;
}
.box p{
border-right: unset;
font-size: 12px; }
.posts-expand {
margin: unset;
} } @media (min-width: 1600px){ .container .main-inner{
width: 100%;
}
} </style> <div id="box" class="box"></div> <script type="text/javascript"> // 相册json
var json =
[
[
{
'title': '七彩丹霞',
'url': 'https://s2.ax1x.com/2019/09/07/nlRzZt.jpg'
},
{
'title': '9月雨后',
'url': 'https://s2.ax1x.com/2019/09/07/nlRvqI.jpg'
},
{
'title': '五花肉',
'url': 'https://s2.ax1x.com/2019/09/07/nlRbGD.jpg'
},
{
'title': '五花肉+1',
'url': 'https://s2.ax1x.com/2019/09/07/nlRHPO.jpg'
},
{
'title': '别样的艳',
'url': 'https://s2.ax1x.com/2019/09/07/nlRTIK.jpg'
},
{
'title': '远处的城堡',
'url': 'https://s2.ax1x.com/2019/09/07/nlRXMd.md.jpg'
},
{
'title': '夕阳红',
'url': 'https://s2.ax1x.com/2019/09/07/nlRqRe.md.jpg'
},
{
'title': '卢浮宫',
'url': 'https://s2.ax1x.com/2019/09/07/nlRIVx.md.jpg'
},
{
'title': '景区一角',
'url': 'https://s2.ax1x.com/2019/09/07/nlRhrR.md.jpg'
},
{
'title': '夕阳',
'url': 'https://s2.ax1x.com/2019/09/07/nlRbGD.md.jpg'
},
{
'title': '冰沟丹霞',
'url': 'https://s2.ax1x.com/2019/09/07/nlRLxH.md.jpg'
},
{
'title': '别样的雨后',
'url': 'https://s2.ax1x.com/2019/09/07/nlRRxJ.md.jpg'
},
{
'title': '卢浮宫',
'url': 'https://s2.ax1x.com/2019/09/07/nlR4q1.md.jpg'
}
], [
{
'title': '世界之巅',
'url': 'https://s2.ax1x.com/2019/09/07/nl5540.md.jpg'
},
{
'title': '一天的行程',
'url': 'https://s2.ax1x.com/2019/09/07/nl56gS.md.jpg'
},
{
'title': '珠峰国家公园',
'url': 'https://s2.ax1x.com/2019/09/07/nl5RBj.md.jpg'
},
{
'title': '盘山公路',
'url': 'https://s2.ax1x.com/2019/09/07/nl54Nq.md.jpg'
},
{
'title': '保护区',
'url': 'https://s2.ax1x.com/2019/09/07/nl5LDJ.md.png'
},
{
'title': '珠峰大本营',
'url': 'https://s2.ax1x.com/2019/09/07/nlINGV.md.png'
},
{
'title': '氧气瓶',
'url': 'https://s2.ax1x.com/2019/09/07/nl5jER.md.jpg'
},
{
'title': '珠峰日出',
'url': 'https://s2.ax1x.com/2019/09/07/nl5cjg.md.jpg'
},
{
'title': '海拔最高的寺庙—绒布寺',
'url': 'https://s2.ax1x.com/2019/09/07/nl5hEn.md.jpg'
}
]
] var content = json2Array(json); var wid = 250;
if ((window.innerWidth) > 1200) {
wid = (window.innerWidth*3)/18;
}
var box = document.getElementById('box'); var i=0;
for (var i = 0; i < content.length; i++) {
var conBox = document.createElement("div");
conBox.id = 'conBox'+i;
box.appendChild(conBox);
var item = document.createElement("div");
var title = content[i][0].title;
var url = content[i][0].url;
item.innerHTML = "<button class = 'title' style = 'background: url(" + url + ");'><span style = 'display: inline;'><strong style = 'color:#f0f3f6;' >" + title + "</strong></span></button>";
conBox.appendChild(item); for (var j = 1; j < content[i].length ; j++) {
var _title = content[i][j].title;
var _url = content[i][j].url;
var item = document.createElement("li");
item.innerHTML="<div class = 'imgbox' id = 'imgbox' style = 'height: " + wid + "px;'><img class = 'imgitem' src='" + _url + "' alt='" + _url + "'></div><span>" + _title +"</span>";
conBox.appendChild(item);
}
} //json转二维数组
function json2Array(arr) {
for (var i=0; i<arr.length; i++) {
var tmpArr = []
for (var attr in arr[i]) {
tmpArr.push(arr[i][attr])
}
arr[i] = tmpArr
}
return arr
} </script>

图像修改的地方为:

                'title': '世界之巅',
'url': 'https://s2.ax1x.com/2019/09/07/nl5540.md.jpg'

图片链接和图像注释

背景图片修改地方为:

background:url('https://s2.ax1x.com/2019/09/07/nlL4pR.jpg');

我的个人博客主页,欢迎访问

我的CSDN主页,欢迎访问

我的GitHub主页,欢迎访问

Hexo博客Next主题相册搭建的更多相关文章

  1. hexo博客yili主题个性化自定义教程(1) ——借鉴中学习,初认yili主题

    文章转载于:hexo博客yili主题个性化自定义教程(1) --借鉴中学习,初认yili主题 这个博客跌跌撞撞也弄了好多天了,由于Next主题不知道什么情况,被我玩坏了.所以换了一个主题. 大名鼎鼎的 ...

  2. Hexo博客maupassant主题添加Google Adsense广告

    自从在 Github Page 落户以后,很长一段时间使用的是极简且有点艺术范儿的 fexo 主题,而不是大名鼎鼎的 next 主题.后来偶然发现了符合我审美的Hexo博客 maupassant 主题 ...

  3. 关于Hexo博客NEXT主题(Gmini)站点图标不显示,显示错误的解决办法

    关于Hexo博客NEXT主题(Gmini)站点图标不显示,显示错误的解决办法   最近闲着没事自己利用Hexo和Github搭了个博客,但是在NEXT(Gmini)主题优化时,出了很多错误,图标不显示 ...

  4. hexo博客更换主题

    前边我们已经学会了博客的搭建了,这次我们来看看怎么样让我们的博客更漂亮,更个性化.那就是来更换博客的主题,让我们的博客与众不同起来.我们可以去hexo的主题官网去挑选你自己喜欢的主题风格.里边收录了很 ...

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

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

  6. Hexo博客框架10分钟搭建个人博客

    首先是先给大家打个招呼 最近看网上看到了很多的的关于搭建博客的视频,我自己也学着自己搭建了一个博客"我自己的博客链接"(欢迎大家来我的博客跟我深入交♂流),今天我把搭建的过程记录下 ...

  7. hexo博客进阶-相册和独立域名

    之前我已经写了一篇文章详细的讲述了如何使用hexo搭建github博客.如果还没有看的可以去看看,hexo搭建博客 其实,根据这篇文章的过程我们就能够搭建一个专属于自己,并且非常美观的博客了.但是如果 ...

  8. Hexo博客yilia主题添加Gitment评论系统

    一开始搭建hexo+yilia博客使用的评论功能是通过来必力实现的.来必力免费,功能多,一开始的体验效果很好,但是后来打开网站发现来必力加载的越来越慢(来必力是韩国的公司,可能是国内限制),遂打算换一 ...

  9. hexo博客pure主题解决不蒜子计数不显示的问题

    最近在建个人博客网站,想统计自己的博客页面访问量,就用到了不蒜子页面访问统计.可是遇到了糟心事,居然不显示!!! 不蒜子官网示例:两行代码,搞定计数 <script async src=&quo ...

  10. Hexo博客skapp主题部署填坑指南

    相信大家都很喜欢 hexo skapp 的主题,由于作者采用结巴分词,加上需要依赖各种各样的环境 所以可能大家踩过很多坑,也许每个人踩得坑不一样,这里使用 Docker 容器 centos 来部署, ...

随机推荐

  1. 谈一谈Python中的装饰器

    1.装饰器基础介绍 1.1 何为Python中的装饰器? Python中装饰器的定义以及用途: 装饰器是一种特殊的函数,它可以接受一个函数作为参数,并返回一个新的函数.装饰器可以用来修改或增强函数的行 ...

  2. vue2项目中调取登录接口登录以后获取个人信息以后,储存在哪里,怎么在不同的页面展示想要的信息?

    在Vue2项目中,可以将个人信息存储在Vuex状态管理中或者浏览器的本地存储中,具体取决于项目的需求和规模. 1. Vuex状态管理 在Vuex中定义一个user模块,用于存储用户信息,可以在登录成功 ...

  3. MQTT-主题基础

    MQTT主题 MQTT的主题是一个utf-8编码的字符串,最大长度65535字节,严格区分大小写 MQTT主题支持分层结构,主题分隔符用'/'表示,主题的层级长度可以为0 # 将主题划分为3个层级 ' ...

  4. [双目视差] 立体匹配-SGBM半全局立体匹配算法

    立体匹配-SGBM半全局立体匹配算法 一.SGBM算法实现过程 1.预处理 预处理目的是得到图像的梯度信息 Step1:SGBM采用水平Sobel算子,对图像做处理,公式为: Sobel(x,y)=2 ...

  5. P1008 [NOIP1998 普及组] 三连击,置顶题解的问题

    题目链接: https://www.luogu.com.cn/problem/P1008 置顶题解 暴力,加简化的判断,数学原理,2个集合内所有数相加相乘结果一样,2个集合的内容一样(没错我自己编得, ...

  6. 2022-12-29:nsq是go语言写的消息队列。请问k3s部署nsq,yaml如何写?

    2022-12-29:nsq是go语言写的消息队列.请问k3s部署nsq,yaml如何写? 答案2022-12-29: yaml如下: apiVersion: apps/v1 kind: Deploy ...

  7. 2020-09-13:判断一个正整数是a的b次方,a和b是整数,并且大于等于2,如何求解?

    福哥答案2020-09-13: 首先确定b的范围,b的范围一定在[2,logN]里.然后遍历b,求a的范围,如果范围长度等于0,说明这个正整数是a的b次方.1.遍历b范围.二分法求a,a初始范围是[2 ...

  8. 2022-05-15:N个学校之间有单向的网络,每个学校得到一套软件后,可以通过单向网络向周边的学校传输。 问题1:初始至少需要向多少个学校发放软件,使得网络内所有的学校最终都能得到软件; 问题2:至

    2022-05-15:N个学校之间有单向的网络,每个学校得到一套软件后,可以通过单向网络向周边的学校传输. 问题1:初始至少需要向多少个学校发放软件,使得网络内所有的学校最终都能得到软件: 问题2:至 ...

  9. 2022-02-07:k8s安装mysql,yaml如何写?(非面试题)

    2022-02-07:k8s安装mysql,yaml如何写?(非面试题) 答案2022-02-07: yaml如下: apiVersion: apps/v1 kind: Deployment meta ...

  10. 在 ASP.NET Core Web API 中处理 Patch 请求

    一.概述 PUT 和 PATCH 方法用于更新现有资源. 它们之间的区别是,PUT 会替换整个资源,而 PATCH 仅指定更改. 在 ASP.NET Core Web API 中,由于 C# 是一种静 ...