Hexo NexT 部落格搭建相簿 二

按照 hexo+next 部落格搭建相簿(一) 搭建好相簿庫.

在 next 主題下面增加 photo.swig 頁面.

路徑如下

next/layout

生成相簿頁面和生成分類和標籤頁面一樣

hexo new page 「photos」

其中正在載入中…中的 url 替換成你的部落格**.

需要 三個 css 檔案 和乙個 js 檔案.都在我的 github 上面 ,其中photoswipe.css和default-skin.css這 css 是檢視外掛程式的 css, 後面會說到,把這些 css 和 js 檔案都在 photos 資料夾下面

ins.css

photoswipe.css

default-skin

ins.js上面 index.md 中加入了兩個 css 檔案,這是我們用 photoswipe 檢視相簿用到的.具體可以參考** photoswipe

這裡我們已經把 css 檔案加上了.之後我們要加上 js 檔案 photoswipe.min.js 和photoswipe-ui-default.min.js

js存放路徑為

next/source/js/src

在layout/_scripts/pages/post-details.swig中插入

src="

}/src/photoswipe.min.js?v=
}">
script>
src="
}/src/photoswipe-ui-default.min.js?v=
}">
script>

_layout.swig路徑為

next/layout

在 _layout.swig 中 前插入

class="pswp"
tabindex="-1"
role="dialog"
aria-hidden="true">
class="pswp__bg">
div>
class="pswp__scroll-wrap">
class="pswp__container">
class="pswp__item">
div>
class="pswp__item">
div>
class="pswp__item">
div>
div>
class="pswp__ui pswp__ui--hidden">
class="pswp__top-bar">
class="pswp__counter">
div>
class="pswp__button pswp__button--close"
title="close (esc)">
button>
class="pswp__button pswp__button--share"
title="share">
button>
class="pswp__button pswp__button--fs"
title="toggle fullscreen">
button>
class="pswp__button pswp__button--zoom"
title="zoom in/out">
button>
class="pswp__preloader">
class="pswp__preloader__icn">
class="pswp__preloader__cut">
class="pswp__preloader__donut">
div>
div>
div>
div>
div>
class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
class="pswp__share-tooltip">
div>
div>
class="pswp__button pswp__button--arrow--left"
title="previous (arrow left)">
button>
class="pswp__button pswp__button--arrow--right"
title="next (arrow right)">
button>
class="pswp__caption">
class="pswp__caption__center">
div>
div>
div>
div>
div>

Hexo NexT 部落格搭建相簿 二

按照 hexo next 部落格搭建相簿 一 搭建好相簿庫.在 next 主題下面增加 photo.swig 頁面.路徑如下 next layout 生成相簿頁面和生成分類和標籤頁面一樣 hexo new page photos 其中正在載入中 中的 url 替換成你的部落格 需要 三個 css 檔...

hexo next 搭建個人部落格系列教程

環境 git hexo next macos 這個系列教程包括以下內容 hexo next 搭建個人部落格 一 介紹如何在本地快速的搭建乙個基於 hexo 的部落格。你只需要用 markdown 語法寫好博文，並儲存在指定的資料夾中，然後輸入hexo server命令，訪問http localhos...

jquery部落格仿百度空間相簿展示相簿效果文字顯隱

jquery部落格每天重複這一樣的事情，不斷的切圖做頁面，哪邊樣式出問題了，馬上就去改，又有新的需求，馬上去做，生成demo頁面，好方便後端的同事們除錯。商場的頁面每天繼續忙不停的做，前端傷不起，來面試的不是經驗不足，就是吊兒郎當的，擦，糾結。大致是這樣的 背景蠻大的，我們不需要那麼多，用到個bac...