與舊版Typecho主題 Snapic 相比,新版主題 Snapic Plus 不使用插件,不使用自定義字段,不用填寫圖片高度,使用全新響應式瀑布流框架,綜合網友建議,新增了一些功能,優化了一些樣式。
- 主題 Snapic Plus 適用于圖片類網站,使用瀑布流(masonry)的方式延時加載(lazyload)展示圖片文章,同時支持圖片燈箱(fancybox)效果。
- 主題 Snapic Plus 刪減了大多數功能:沒有側欄,沒有留言,沒有導航。
- 分類頁 archive 和搜索頁沿用首頁 index;獨立頁 page 沿用文章頁 post。文章頁 post 只支持移動端顯示,且未在首頁開啟鏈接,僅用于搜索引擎抓取頁面。

主題原文:
使用方法
請將主題文件夾 SnapicPlus 上傳至目錄 themes 中,在后臺啟用即可。
A 首頁大圖

1)后臺》控制臺》外觀》設置外觀,分別填入電腦和手機端的首圖鏈接和簡述。
2)電腦端首圖,建議圖片尺寸為寬3200,高1800。也就是16:9的比例。對顯示效果無要求的,可無視。
3)手機端首圖,建議圖片尺寸為寬900,高1600。也就是9:16的比例。對顯示效果無要求的,可無視。
4)依個人喜好,點選無圖、單圖或雙圖的首圖類型。
5)使用小技巧,把電腦和手機端需要顯示的首圖,以附件上傳的形式添加到以下新建獨立頁面(about)中,獲取鏈接即可。
B 置頂圖文

1)在后臺新建獨立頁面,頁面縮略名必須填入about,亂填無效!
2)上傳圖片,并把圖片插入文章中,才會顯示,作為前臺文章縮略圖使用(其他文章的縮略圖讀取上傳附件的第一張圖片)。如果你使用的是(https),前臺縮略圖不顯示的話,可以嘗試修改文件 functions.php,搜索(http)改為(https)
3)在文本框中輸入內容,即在前臺輸出摘要。注意:摘要不支持超鏈接顯示。
如何隱藏置頂圖文?

1)在編輯頁面,點開右側的“高級選項”,在“公開度”選擇“隱藏”即可。
C 單篇相冊
- 什么是單篇相冊?

1)文章在前臺顯示的縮略圖,源自每篇文章附件中的第一張圖片(置頂圖文的縮略圖讀取插入文章中的第一張圖片),可以不用把圖片插入文章中。如果附件中沒有圖片,縮略圖默認為加載動畫的動圖img/loading.gif。
2)如果在同一篇文章中,以附件上傳的形式添加了多張圖片,則在前臺自動生成單篇相冊(即攝影中的組圖效果),可以不用把圖片插入文章中。
如何讓單篇相冊的左上角顯示張數標簽?

1)如果在同一篇文章中,以附件上傳的形式添加了多張圖片,又需要前臺顯示圖冊的張數標簽,就需要把附件中的圖片都插入文章中,否則不會顯示。
2)只有當插入文章中的圖片大于等于2張時,才會顯示,插入幾張就會顯示幾張的標簽(如:上傳附件5張,插入文中3張,前臺角標顯示的是3P)。
如何顯示文章標題和摘要?

1)按照發布文章的正常方式操作即可,標題欄輸入標題,文本框輸入內容。
D 設置外觀
如何自定義外觀?

1)后臺》控制臺》外觀》設置外觀,依喜好設置即可。
BUG修復
03月30日?解決單篇相冊無法讀取附件除jpg以外的圖片格式。修復方法:
1)后臺》控制臺》外觀》設置外觀》編輯當前外觀》functions.php。
2)搜索'image/jpeg'(注意包含單引號),替換為'image/jpeg' or 'image/png' or 'image/gif' or 'image/bmp'
3)保存文件,即可。
方法一:圖片外鏈
結合UpyunFile 新版又拍云插件實現附件USS云存儲加載
- 原文來源:詳情
此文章講解Typecho主題Snapic Plus(新版)結合UpyunFile 新版又拍云插件實現附件USS云存儲加載圖片,實現節約網站流量加速網站訪問速度。
安裝UpyunFile 新版又拍云插件
在主題中搜索以下代碼:
<a class="grid__link fancybox-buttons" href="$this->siteUrl$img[1]" data-fancybox-group="gallery-$this->cid"><img class="lazy grid__img" src="$this->siteUrl/usr/themes/SnapicPlus/img/loading.gif" data-original="$this->siteUrl$img[1]" alt="$img[0]" /></a>
修改如下代碼為又拍云加速域名換成如http://img.zhangyin.org
改成如下代碼:
data-original="http://img.zhangyin.org$img[1]-up
說明:http://img.zhangyin.org就是又拍云的加速域名,插件中如下設置的
-up這個是加在URL圖片名字后面的,又拍云開啟圖片處理后可以支持方便網站圖片加載速度

官方教程附上:
- 又拍云文檔: 詳情

這個時間前臺圖片就顯示正常了,嘿嘿此方法適用所有主題,圖片會直接上傳到又拍云。
方法二:支持外鏈和讀取多種圖片格式
- 代碼參考:詳情
修改后既可以使用附件,
打開主題文件下的 functions.php,刪除 63 行至 78 行,然后在刪除的地方添加以下代碼:
function img_catiz($content) {
preg_match_all("/<img.*?src="(.*?)"[^>]*>/i", $content, $theurl); //通過正則式獲取圖片地址
$img_src = $theurl[1]; //將賦值給img_src
return $img_src;
}
打開主題文件下的 index.php,刪除 86 行至 95 行,然后在刪除的地方添加以下代碼:
<?php
$bye_my_love = img_catiz($this->content);
foreach ($bye_my_love as $do_not_cry) {
echo '<div class="pic-'.$this->cid.'"><a class="grid__link fancybox-buttons" href="'.$do_not_cry.'" data-fancybox-group="gallery-'.$this->cid.'"><img class="lazy grid__img" src="/usr/themes/SnapicPlus/img/loading.gif" data-original="'.$do_not_cry.'" /></a></div>
';
}
?>
注意:只支持常規圖片后綴,如果你需要使用又拍云的圖片處理 - 縮略圖版本,需要在 $do_not_cry 后面加上縮略名