【Hexo+Next主题】相册功能搭建详细步骤
月亮星座代表什么【Hexo+Next主题】相册功能搭建详细步骤
主体思路
本⽂不涉及Hexo博客搭建内容，仅在已有的hexo博客基础上，增加博客的相册功能。
相册功能的搭建涉及两⼤部分：
⼀是建⽴相册存储的项⽬（本⽂选⽤GitHub）、相册图⽚的处理等。
⼆是增加与配置hexo中NEXT主题的相关⽂件实现与第⼀部分的关联等
详细步骤
建⽴相册存储项⽬并处理
1. 使⽤github创建⼀个新项⽬（作为相册存储及处理的仓库），本⽂项⽬名统⼀为test_album，并clone到本地；
2. 在本地进⼊test_album项⽬，建⽴下⾯2个特定名称的⽂件夹 ：（存储图⽚⽤）
1. min_photos （空⽂件夹）
2. photos (请顺⼿放⼀张美照……）
图⽚命名规则：20XX-XX-XX_photoName.jpg（如：2019-11-10_steves.jpg）
3. 继续给项⽬中加⼊下⾯2个⽂件 : (处理图⽚⽤）
1. ImageProcess.py
污段子2. tool.py
1. 修改为博客位置：with open("My_Blog_PATH/themes/next/source/lib/test_album/data.json","w") as fp:
台风蓝预警是什么级别
json.dump(final_dict, fp, ensure_ascii=False)
2. 在个⼈博客项⽬中的/themes/next/source/lib/ 下建⽴⼀个⽂件夹test_album。（⽬的是存储图⽚的链接）4. OK，1-3准备⼯作已完成，执⾏下⾯的图⽚处理脚本：
执⾏上述步骤1-4完成后，提交修改内容回GitHub。
⾄此，本⽂第⼀部分完成啦，进⼊下⼀部分即：博客相关⽂件的添加与修改。
HEXO的Next主题下的相关⽂件添加与修改
建⽴博客相册的页⾯
1. 在博客根⽬录下添加photo页⾯，执⾏命令：hexo n page photos
2. 在themes/next/_l配置⽂件中menu选项中添加photos: 相册: /photos/ || camera
3. 在根⽬录下 source/photos/ ⽂件夹中的index.md⽂件中添加， （⚠ 修改⽂件中的博客地址为你⾃⼰博客的域名）
4. 添加⼀系列⽂件
1. 在////album/下添加
1. 修改ins.js⽂件的121和122⾏左右，把这两个地址改为你的仓库（GitHub线上地址）图⽚地址（看⼤图的地址，实在
不到，就把下⾯两个替换上即可，只需把红⾊字体修改为你的github名称和存储图⽚的仓库名即可。操碎了⼼……）。
1. 例如:
2. 例如:
2. 将，两个⽂件添加到themes/next/source/js/src中
5. 配置⼀些⽂件
1. 在⽂件next/layout/_layout.swig的头部前添加对js⽂件引⽤：
. <script src="{{ url_for(theme.js) }}/src/photoswipe.min.js?v={{ theme.version }}"></script>
<script src="{{ url_for(theme.js) }}/src/photoswipe-ui-default.min.js?v={{ theme.version }}"></script>
2. 在⽂件next/layout/_layout.swig的body（⽅便起见，直接添加在body起始标签下⾯即可）下添加
. {% pe === "photos" %}
<!-- Root element of PhotoSwipe. Must have class pswp. -->
<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
<div class="pswp__bg"></div>
<div class="pswp__scroll-wrap">
<div class="pswp__container">
<div class="pswp__item"></div>
the one i love most
<div class="pswp__item"></div>
<div class="pswp__item"></div>
</div>
<div class="pswp__ui pswp__ui--hidden">
<div class="pswp__top-bar">
<div class="pswp__counter"></div>
<button class="pswp__button pswp__button--close" title="Close (Esc)"></button>
<button class="pswp__button pswp__button--share" title="Share"></button>
出国签证办理流程
<button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button>
<button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>
<!-- Preloader demo codepen.io/dimsemenov/pen/yyBWoR -->
<!-- element will get class pswp__preloader--active when preloader is running -->
<div class="pswp__preloader">
<div class="pswp__preloader__icn">
<div class="pswp__preloader__cut">
<div class="pswp__preloader__donut"></div>
</div>
</div>
</div>
</div>
<div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
<div class="pswp__share-tooltip"></div>
</div>
<button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)">中国女篮主教练
</button>
<button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)">
</button>
<div class="pswp__caption">
<div class="pswp__caption__center"></div>
</div>
</div>
</div>
</div>
{% endif %}
3. 在/themes/next/layout/_scripts/pages/post-details.swig中添加
. <script type="text/javascript" src="{{ url_for(theme.js) }}/src/photoswipe.min.js?v={{ theme.version }}"></script> <script type="text/javascript" src="{{ url_for(theme.js) }}/src/photoswipe-ui-default.min.js?v={{ theme.version }}"></script>
完成第⼆⼤部分1-5步骤，相册的搭建也进⼊尾声，最后执⾏熟悉的命令，完成全部的过程。
hexo g
hexo d
整个过程请保持耐⼼和头脑清楚，慢慢来，⽐较快!

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。