Hexo之精美相册设计

最新推荐文章于 2024-04-05 09:36:44 发布
最新推荐文章于 2024-04-05 09:36:44 发布
阅读量1k 收藏 3
点赞数
分类专栏： Hexo 文章标签： js html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Jasonfree/article/details/106086461
版权
  1. 首先在hexo的resource目录下创建文件夹
  2. 在index.md加入如下代码,图片自行修改
---
title: 涂鸦
date: 2020-05-11 21:06:26
---
<h4 class="title4">岁月永远年轻，我们慢慢老去，你会发现，童心未泯，是一件值得骄傲的事情 </h4>


<style type="text/css">
    .title4{
    text-align: center;
    color: #fafafa;
    letter-spacing: 0;
    text-shadow: 0px 1px 0px #999, 0px 2px 0px #888, 0px 3px 0px #777, 0px 4px 0px #666, 0px 5px 0px #555, 0px 6px 0px #444, 0px 7px 0px #333, 0px 8px 7px #001135;
    font-size:32px;
    margin: 2em auto;
    background: #3f9;
    width: 34em;
    }
    
    
    .sidebar{
        display: none;
    }
    .content{
        margin-bottom: 360px;
    }
    .content-wrap{
       width: 100%;
       // box-sizing: content-box;
       padding: initial !important;
       //background:url('https://s1.ax1x.com/2020/05/11/YJxcgx.jpg');
    }
    
	.main-inner{
		width: 100%;
	}
	.sidebar-toggle{
	display: none !important;
	}
	.eye{
	display: none !important;
	}
	.aplayer-body{
	display: none;
	}
	.main {
        padding-bottom: 150px;
        margin-top: 30px !important;
        padding-top: 16em;
	}
	.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;*/
	}
	
	}
	.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;
	}
	.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: 260px;
	}
	.box li span{
        display: block;
        padding: 4% 7% 10% 7%;
        min-height: 80px;
        //background: #fff;
        font-size: 16px;
        font-weight: 600;
        line-height: 26px;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        color: #3f9;
	}

	img.imgItem{
		padding: unset;
		padding: unset;
		border: unset;
		position: relative;
		padding: 0px;
		height: 100%;
		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': 'http://ww1.sinaimg.cn/large/006brE51gy1gepyclhyj5j30v90kudk3.jpg'
            },
            {
                'title': ' ',
                'url': 'http://ww1.sinaimg.cn/large/006brE51gy1gepzx8g7dlj30dw08zwei.jpg'
            },
            {
                'title': ' ',
                'url': 'https://s1.ax1x.com/2020/05/11/YJxRKK.jpg'
            },
            {
                'title': ' ',
                'url': 'http://ww1.sinaimg.cn/large/006brE51gy1geq08gz2gnj30u80kuq66.jpg'
            },
            {
                'title': ' ',
                'url': 'https://s1.ax1x.com/2020/05/11/YYpRK0.jpg'
             },
             {
                 'title': ' ',
                 'url': 'https://s1.ax1x.com/2020/05/11/YJxr59.jpg'
              },
              {
                  'title': ' ',
                  'url': 'http://ww1.sinaimg.cn/large/006brE51gy1gepyet7zo5j30rs0kutbg.jpg'
               },
                {
                 'title': ' ',
                 'url': 'http://ww1.sinaimg.cn/large/006brE51gy1gepyf48oszj30v90kutak.jpg'
              },
               {
               'title': ' ',
               'url': 'http://ww1.sinaimg.cn/large/006brE51gy1gepyfrc1hlj30du0kut9f.jpg'
            },
            {
                'title': ' ',
                'url': 'http://ww1.sinaimg.cn/large/006brE51gy1geq01q3mfxj30dw099t93.jpg'
             },
             {
                 'title': ' ',
                 'url': 'http://ww1.sinaimg.cn/large/006brE51gy1geq01yjv97j30dw0k7jsg.jpg'
              },
              {
                  'title': ' ',
                  'url': 'http://ww1.sinaimg.cn/large/006brE51gy1geq027hxdgj30dw0ij0u2.jpg'
               },
               {
                   'title': ' ',
                   'url': 'http://ww1.sinaimg.cn/large/006brE51gy1geq02mtlb5j30dw0j4wf2.jpg'
                },
                {
                   'title': ' ',
                   'url': 'http://ww1.sinaimg.cn/large/006brE51gy1geq09e3r1wj30dw0kuta4.jpg'
                },
                {
                   'title': ' ',
                   'url': 'http://ww1.sinaimg.cn/large/006brE51gy1geq0cchl2qj30dw0hdta9.jpg'
                }
                

    	],
    	
    	[
            {
                'title': '一场说走就走的城市旅行',
                'url': 'https://s1.ax1x.com/2020/05/12/YN4b3F.jpg'
            },
            {
                'title': ' ',
                'url': 'https://s1.ax1x.com/2020/05/12/YN4vH1.jpg'
            },
            {
                'title': ' ',
                'url': 'https://s1.ax1x.com/2020/05/12/YN4jBR.jpg'
            },
            {
                'title': ' ',
                'url': 'https://s1.ax1x.com/2020/05/12/YN4Xu9.jpg'
            },
            {
                'title': ' ',
                'url': 'https://s1.ax1x.com/2020/05/12/YN4LjJ.jpg'
            },
            {
                'title': ' ',
                'url': 'https://s1.ax1x.com/2020/05/12/YNIxfK.jpg'
            },
          {
            'title': ' ',
            'url': 'https://s1.ax1x.com/2020/05/12/YNoSSO.png'
          },
          {
          'title': ' ',
          'url': 'http://ww1.sinaimg.cn/large/006brE51gy1gepy1vaa6tj33y8280npf.jpg'
           },
        {
            'title': ' ',
            'url': 'http://ww1.sinaimg.cn/large/006brE51gy1gepy1j0fvej33y82807wj.jpg'
          },
         {
             'title': ' ',
             'url': 'http://ww1.sinaimg.cn/large/006brE51gy1gepy17sfjfj33y82804qt.jpg'
           },
           {
               'title': ' ',
               'url': 'http://ww1.sinaimg.cn/large/006brE51gy1gepy49k6iej33y82801kz.jpg'
             },
             {
                 'title': ' ',
                 'url': 'http://ww1.sinaimg.cn/large/006brE51gy1gepy4qjhy1j33282ao4qs.jpg'
               },
               {
               'title': ' ',
               'url': 'http://ww1.sinaimg.cn/large/006brE51gy1gepy5bfhy8j32ao3287wi.jpg'
             },
             {
                 'title': ' ',
                 'url': 'http://ww1.sinaimg.cn/large/006brE51gy1gepy5kyc3mj32ao328b2a.jpg'
               }
            
    	],
          
          [
              {
                  'title': '一夫当关，万夫莫开',
                  'url': 'http://ww1.sinaimg.cn/large/006brE51gy1gepxpupjwvj32ao328u10.jpg'
              },
              {
                  'title': ' ',
                  'url': 'http://ww1.sinaimg.cn/large/006brE51gy1gepxoohcd2j33282aoqv6.jpg'
              },
              {
                  'title': ' ',
                  'url': 'http://ww1.sinaimg.cn/large/006brE51gy1gepxp6piozj32ao328hdx.jpg'
              },
              {
                  'title': ' ',
                  'url': 'http://ww1.sinaimg.cn/large/006brE51gy1gepxpkhyxoj32ao328u10.jpg'
              },
              {
                  'title': ' ',
                  'url': 'http://ww1.sinaimg.cn/large/006brE51gy1gepxq72kw0j32ao328qv9.jpg'
               },
               {
                   'title': ' ',
                   'url': 'http://ww1.sinaimg.cn/large/006brE51gy1gepxqhw36gj33282ao4qq.jpg'
                },
                 {
                   'title': ' ',
                   'url': 'http://ww1.sinaimg.cn/large/006brE51gy1gepxqqvumxj33282ao1l1.jpg'
                },
                {
                  'title': ' ',
                  'url': 'http://ww1.sinaimg.cn/large/006brE51gy1gepxr7lcyzj33282ao4qs.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>
  1. 实际效果请看：https://www.ktbear.top/photos/
湖湖yuan
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
Hexo添加相册
qq_27439819的博客
03-15 1079
最终效果请看这里：https://www.linebi.top/photos 说明 关于 我使用的主题是hexo-theme-yilia，其中实现相册功能的方案是同步instagram上面的图片，但是现在instagram被禁，不能使用了 下面是通过自己的方式实现了相册功能，其中的样式还是使用该主题提供的。 方案 在github上新建一个仓库，主要用于存储图片，可以通过url访问到，也方便管...
hexoNext主题添加相册
最新发布
silent_F的博客
06-10 390
最近将博客的主题换回了next主题。以前喜欢将自己的主题弄的花里胡哨的。现在反而更喜欢简单点的。改为next主题后，有些自己想要的功能没有，比如相册。在网上查了好多资料，也有人实现了，但是都比较麻烦，或者不是自己想要的效果。于是自己换了种思路，直接用html的方式实现，再加入到博客中。这样以后不管换什么主题，相册功能都可以直接移植，非常的方便。{% link 笔者效果,%}
blogPicture:hexo博客相册图片
03-15
blogPicture:hexo博客相册图片
Hexo 相册实践
weixin_30394633的博客
07-23 529
灵感 　　想给自已的blog添加一个相册功能、给生活中的点点滴滴留影记录。搜寻网络上给Next主题添加相册功能的基本上没有，只能重头到尾开始一点点的实践。　　　　大致的想法：　　　　1. 相册展示类似于归档一样，按时间戳来分类　　　　2.每一个时间节点都是一个小相册，展示的时候上面是相册的标题，下面是几张经典图片的缩略图　　　　3.点击标题，进行相册的详细页...
Hexo+Github实现相册功能
笑不语的博客
04-23 1090
最终效果请看这里：https://javacfox.github.io/photos/ 本文参考了Lawlite大神的实现方法，如果想看具体原理，请访问：http://lawlite.me/ 一、具体实现流程 1、github操作 在github上新建一个仓库，用于存储相册 github的相关命令操作，请参考：https://blog.csdn.net/weixin_43935907/art...
Hexo+yilia+Github实现相册功能（超详细）
全 洛的博客
09-09 3785
文章目录一、目的：二、方案三、实现1.博客页面添加相册2.GitHub操作3.修改代码注意(第一个容易出错的地方)：4. 添加脚本注意(第二个错误地方-重点)：如果没有这一步可能缩略图显示不出来5.运行脚本注意：每次上传照片都需要运行python脚本6.测试OK！！！完美！！！大功告成！！！ 效果图： 最终效果请看这里：quanluo.github.io 一、目的： 为博客添加相册功能 通过GitHub来实现相册功能 二、方案 在github上新建一个仓库，主要用于存储图片，可以通过url访问到
hexo 集成相册操作
weixin_43783814的博客
06-04 702
原文博客地址 藤原拓鞋的博客 hexo 基本操作 创建一个新页面 hexo new "my new article" (引号里为新建博客文章的名字) 执行完就会在source/_posts文件夹下创建对应的.md文件 编译文件 hexo g 启动服务器，执行文件 hexo server 简写 hexo s 部署文件到远端服务器 hexo deploy 简写 hexo d 上传文件到 Github 在 Github 上新建仓库 在需要上传的文件夹目录下，运行 git init 初始化 git 运行
关于给hexo博客增加相册页面（实现瀑布流相册，实现加密相册）
itsNekoDeng的博客
11-04 4164
前言: 本文是关于给自己的博客网站添加一个相册页面，并且实现瀑布流相册效果，基于matery主题，其他主题亦可参考。 首先，直接上效果图，详细浏览地址： 关于给hexo博客增加相册页面（实现瀑布流相册） 新建相册页面 在站点的source文件夹下面新建一个gallery相册页面。 hexo new page gallery 打开新建的gallery文件夹，里面会有一个index.md文件，设置index.md文件内容。 --- title: gallery date: 2020-10-05
Hexo之hexo-theme-redefine-main博客主题
04-01
“hexo-theme-redefine-main”是专门为Hexo设计的一款主题，它的特点是现代简约的设计风格和强大的功能性。主题通常包含各种预设的布局、颜色方案、字体样式以及社交链接等元素，以满足不同用户的审美需求。在使用这...
hexo-tag-google-photos-album：这是Hexo的标签插件。 它提供了嵌入Google相册中的相册的功能
02-14
hexo-tag-google-photos-album 这是的标签插件。 它提供了嵌入Google相册中的相册的功能。 入门 （GitHub） （npm） （样本） 安装 $ cd < path> $ npm install hexo-tag-google-photos-album --save 用法 设定值 在_config.yml中 googlePhotosAlbum : descriptionLength : 140 target : _blank rel : noopener className : google-photos-album-area enableDefaultStyle : true defaultStyle : google_photos_album.css largeSizeThresh
Hexo yilia 主题添加相册功能
Chemlez'blog
03-15 800
当我们使用hexo博客框架中的yilia主题时，在我们这一博客页面中，原作者Litten并未帮我们添加相册这一功能。这时，如果想让我们的博客拥有相册的功能，就需要我们自行添加改变、添加主题中的相关参数。从网上百度了很多，看了许多的博客，还是遇到了一些坑爬不过去。最终，还是请教了一个小伙伴才得以解决。 一、博客页面添加相册 首先，打开cmd进入blog的source目录下，创建photos文件夹。 ...
hexo网页相册页面的制作
hehung的博客
12-15 3501
有些时候希望在网页中嵌入一些生活中的照片，需要我们自己制作一个照片显示的页面，该文章基于matery主题添加照片显示的页面，支持相册以及照片显示，和相册内容加密等。 该相册页面是基于matery主题完成的，不同的主题可以方式不一样，但是原理是一样的，根据自己的实际情况进行修改即可。 具体显示效果请到我的个人blog进行查看：https:hehung.top 点我进行跳转 创建相册显示页面与...
探秘Hexo-Album：打造个性化的博客相册
gitblog_00060的博客
04-05 570
探秘Hexo-Album：打造个性化的博客相册 项目地址:https://gitcode.com/fakeyanss/Hexo-Album Hexo-Album 是一个专门为Hexo博客框架设计的插件，它旨在帮助用户轻松地在自己的博客中展示美观、高效的相册。如果你是一位热爱记录生活点滴并希望与世界分享的博主，那么Hexo-Album无疑是一个值得尝试的技术解决方案。 项目简介 Hexo-Album...
Hexo-Yilia-相册绝对实现
coder-itl
10-19 210
title: Yilia 相册实现有效解决 date: 2020-10-19 20:42:42 tags: 模块实现 top: 5 创建 photos E:\>cd 你的博客路径 E:\blog>cd source // 进入资源文件夹 E:\blog\source>hexo new page "photos" // 创建 photos INFO Created: E:\blog\source\photos\index.md ***// 之后删除 source/photos/ i.
Hexo博客Next主题相册搭建
AomanHao的博客
12-22 768
参考文章，小红鸡 参考文章，主题美化 在blog文件夹/source下创建photos文件夹，在photos文件夹创建index.md文件，编辑index.md文件，写入以下代码: <style type="text/css"> .header-inner{ display: none; } .sidebar{ dis...
搭建Hexo博客相册
weixin_33724570的博客
09-02 797
注意点：hexo的Next主题默认是不含有相册页面的,如果想添加此页面需自行编写 图片的处理 资源图片是保存在云端上，此教程是存放在GitHub上，可以适当修改放在七牛云也行。首先在电脑上随便一个位置创建一个新的文件夹，这里我创建文件夹名称叫Blog_Album，然后打开git，cd到此文件夹执行git init命令创建git仓库，在此文件夹内新建一个文件夹/photos 在这里存放你需要...
Hexo+NexT 博客搭建相册(一)
TIMDING的博客
06-26 442
用Hexo + NexT 搭建了博客之后,就想搭建一个相册.ps:真是瞎折腾!.自己上网查了些资料,摸索摸索,终于搭建好了.这里写个教程,由于东西比较多,教程分为两部分. 实现想法 在 github 上面创建一个相册库,当有更新时,提交到 github 上面,同时在博客 resource 下面生成一个 data.json来生成所有相册文件的 json 文...
java为hexo设计登录界面
04-01
很抱歉，作为AI语言模型，我没有能力为Hexo设计登录界面，但我可以提供一些思路和建议： 1. 了解Hexo的登录机制和插件 Hexo本身不具备登录功能，需要使用插件实现。常用的插件有hexo-admin、hexo-admin-ui、hexo-admin-pro等，它们提供了后台管理界面和登录机制。在设计登录界面前，需要先了解所选插件的使用方法和配置。 2. 确定设计风格和主题色 登录界面应该与站点整体风格一致，选择合适的主题色和设计风格可以提高用户体验和美观度。可以参考Hexo现有主题的设计风格，或根据自己的喜好和需求进行设计。 3. 设计登录表单和按钮 登录表单应该包括用户名和密码两个输入框，可以根据需要添加验证码等安全措施。登录按钮应该清晰明了，使用易于识别的文字或图标，让用户一目了然。 4. 考虑响应式设计和移动端适配 随着移动设备的普及，登录界面应该具备响应式设计和移动端适配功能，保证在不同尺寸的屏幕上都能正常显示和使用。 总之，登录界面的设计应该以用户体验和安全为主要考虑因素，结合站点整体风格和需求进行设计。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值