Photograph - Typecho相册主题使用文档

Photograph 也一直是个图片/相册类的Typecho博客主题,在保持长期更新的同时依然会努力坚持让这款模版配置更丰富但不臃肿、更好用且依然简约的初心

写在前面:随着模版用户逐渐增多,问题也更多的暴露出来了。这里需要再次着重说明的是,Typecho 一直是个轻量级的博客框架,Photograph 也一直是个图片/相册类的博客主题,如果您期望使用「Ta 们」实现 WP 那样丰富的、或者 CMS 那种专业向的功能,这里可能会令您失望,因此您可以关闭此页然后去寻找更适合您的程序、框架或模版了;

如果您选择继续,香菇感谢您的支持,虽然因为工作关系很难有精力长期维持模版的开发更新,但依然会认真对待「香菇的第一款收费模版」,在保持长期更新的同时依然会努力坚持让这款模版配置更丰富但不臃肿、更好用且依然简约的初心。再次感谢大家的支持。

Photograph - Typecho相册主题使用文档-Npcink
Photograph - Typecho相册主题使用文档-Npcink

Photograph - 精致的Typecho相册主题

不愧是专为相册网站而开发的,整体设计十分用心,丰富的设置功能完全不像是Typecho主题

关于售后

  • 主题授权以用户QQ号码为准
    • 如果号码发生变更请提前联系香菇更新授权记录
    • 如果号码遗失请联系香菇提供历史号码及支付记录信息变更授权
    • 如果「未经任何提前沟通删除香菇好友」或因任何情况「发生号码变更」后无法提供任何「证明身份」的信息,您将失去主题授权及售后支持
  • 售后支持以售后群为主
    • 成功支付后香菇将邀请您加入售后群以方便交流(吹水)和获取主题更新
    • 为了方便管理入群后请尽量不要退群,如果对群消息提醒感到厌烦可屏蔽群信息
    • 未经任何提前沟通的退群行为将被默认为放弃售后,但您不会失去主题的授权,且仍然受到「使用条款」的限制
  • 为兼顾多数用户,免费售后范围:
    • 包含当前已有功能的使用答疑和 BUG 修复
    • 包含「在符合条件的安装环境下安装主题」
    • 不包含任何形式的「功能性」定制开发,但可通过「建议」形式提交需求,作者(香菇)会考虑在后续版本中更新
    • 主题仅提供附件、外链(图床/网盘/存储等)图片的使用支持,但不提供相关三方服务
  • 付费服务包含:
    • 提供 Typecho 运行环境的服务器、空间、域名(不含备案)租用及系统、环境部署等。费用 = 成本费 + 服务费(50RMB/次)

本文提供 Photograph for Typecho 付费版主题使用(配置)说明,主要内容在主题自定义设置项的解释中都有体现,这里仅做总结整理,如需补充请联系香菇处理。

安装主题

  • 在合适的运行环境中安装 Typecho 博客程序;
  • 将主题包解压到 Typecho 目录下的/usr/themes中,保持主题目录名为photograph
  • 到 Typecho 后台管理控制台 > 外观 > 可以使用的外观中启用主题。

Typecho 部分


设置 > 基本

  • 若您需要上传图片附件,则需要勾选允许上传的文件类型设置下的图片文件 (gif jpg jpeg png tiff bmp)项目。
Photograph - Typecho相册主题使用文档-Npcink
Photograph - Typecho相册主题基本设置

设置 > 阅读

  • 建议将每页文章数目设置为12篇(或12的整数倍),可以保证相册列表在6列(6*2)4列(4*3)3列(3*4)2列(2*6)状态下都对齐显示。
Photograph - Typecho相册主题使用文档-Npcink
Photograph - Typecho相册主题阅读设置

撰写(管理)文章/页面 > 高级选项

  • 这里可以设置文章/页面的公开度,文章可选公开密码保护隐藏私密待审核五种状态,其中设置为密码保护时,前台将显示加密封面;页面可选公开隐藏状态。

其他

  • 该主题不需要任何其他 Typecho 插件辅助使用,如需实现其他插件辅助功能请自行解决;
  • 该主题使用 Tyoecho 1.1 (17.10.30) 版本默认编辑器和 Markdown 解析器,不支持特殊需求的「解析」;
  • 如果使用过免费主题,付费版可直接覆盖使用,覆盖后请在后台切换一下主题使默认配置生效。

Photograph 部分


控制台 > 外观 > 设置外观

Photograph - Typecho相册主题使用文档-Npcink
Photograph 设置具体位置

设置备份/还原

  • 因为 Typecho 切换主题后会清空设置,且 Photograph 自定义设置项目较丰富,所以提供备份/还原主题设置和管理设置备份功能。

  • 填写LOGO图片地址,即可替换前台导航栏上的文字标题。

大天朝身份认证

  • 填写ICP备案号,留空则不显示。

网站「导航栏」风格设置

  • 可选仅标题居中的极简 Ins 风格或带有页面、分类、后台管理等菜单且可配置菜单显示方式的BootStrap 顶部固定导航栏

是否折叠「分类」菜单

  • 可选是否折叠显示导航栏上的分类列表菜单。(该项设置仅对 BootStrap 导航栏有效)
  • 如果选择不折叠,二级分类会生效。

导航栏「设置」入口

  • 可选是否隐藏前台导航栏设置入口,大屏模式下如果隐藏该项则搜索栏右对齐显示。(该项设置仅对 BootStrap 导航栏有效)

设置「RSS」入口

  • 选择是否隐藏设置菜单中RSS入口。(该项设置仅对 BootStrap 导航栏有效)

显示列数

  • 超小屏幕显示列数 手机 (<768px) / 小屏幕显示列数 平板 (≥768px) / 中等屏幕显示列数 桌面显示器 (≥992px) / 大屏幕显示列数 大桌面显示器 (≥1200px)

封面高度设置

  • 基于默认「正方形」状态下的高度倍数设置,默认1倍高度;
  • 倍数<1(如0.8)则显示为横向矩形,倍数>1(如1.5)则显示为竖向矩形。

封面标题默认状态

  • 可选是否默认显示封面标题、内容图片数量等信息。

封面标题边框设置

  • 替换了旧版本的「封面标题边框」,可分别设置封面标题框四个方向是否显示。

封面标题圆角设置

  • 可分别设置封面标题框四个角是否显示为圆角

封面标题装饰

  • 可选封面标题框上的装饰挂件,如果标题边框设为不显示则该项配置无效。

是否登录后可见密码保护的相册

  • 设置登陆后才显示加密的相册。这种隐藏方式有缺陷,会导致列表页加密相册直接隐藏,且没有替补相册,不建议启用。

是否显示密码保护相册的原始封面

  • 设置是否显示密码保护相册的原始封面,标题文字及内容仍需密码验证。

密码保护的相册封面

  • 填写密码保护相册的自定义封面图地址,留空则显示默认图片。

懒加载图片设置

  • 填写懒加载 loading 图片地址,留空则显示默认图片。

相册封面图片参数设置/相册详情图片参数设置

  • 填写相册封面/详情图的预处理参数,适用于各种云存储对象存储等,如无此需求请留空。
  • 以七牛为例:
原图URL为:
https://dn-odum9helk.qbox.me/resource/gogopher.jpg

如果需要锚点在正中 (Center),生成 300x300 裁剪图,添加参数后的完整链接为:
https://dn-odum9helk.qbox.me/resource/gogopher.jpg?imageMogr2/gravity/Center/crop/300x300

则后台设置的文本框中只需要填写参数即可:
?imageMogr2/gravity/Center/crop/300x300

示例图片链接来源:https://developer.qiniu.com/dora/api/1270/the-advanced-treatment-of-images-imagemogr2


图片「灯箱」选择

  • 选择用于展示图片详情的插件,可选fancybox3lightGallery插件,请注意为了适配某些功能,两个插件皆为香菇修改版,请不要随意替换。

fancybox3 功能开关/lightGallery 功能开关

  • 配置图片详情界面前台展示样式和功能入口等。

网站公告风格设置

  • 可设置网站公告显示的位置

网站公告颜色设置

  • 可配置网站公告显示的颜色

网站公告

  • 填写网站公告内容,支持HTML

Footer Powered …

  • 可选是否显示页脚「POWERED BY TYPECHO / THEME BY SIITAKE」信息。

全站信息统计

  • 可选是否启用全站信息统计,启用将统计全站分类、文章、页面、评论以及附件和文章内容中的图片数量,可能会略微增加主机负担。

统计代码

  • 可填写三方统计平台生成的统计代码,该内容在页面隐藏生效,留空则不生效。

相册标签

  • 设置是否显示相册详情页(底部)标签。

右下侧功能按钮样式

  • 设置页面右下侧功能按钮的默认形状和不透明度。

组图默认描述

  • 可填写组图的默认描述,优先级低于「自定义字段」的值,留空则显示「未填写」。

自定义样式表(CSS)

  • 可自定义或覆盖主题的某些样式。

全局图片源选项(慎用)

  • 全局设置相册详情图的来源,选择后两项则「自定义字段」处的「图片源」选项不生效

如无特殊需求请保持此选项为默认值。


相册封面风格(测试)

  • 测试功能,暂无描述

自定导航栏菜单

  • 如果需要自定义添加导航栏菜单,请按照名称|地址|是否新窗口打开(true/false)的格式,一行一个填在此设置项的文本框内。
  • 示例:
文档|https://photo.siitake.cn/docs|true
香菇|https://siitake.cn/|false

移动(小屏)页面是否显示顶部分类导航

  • 设置是否显示独立的分类导航。仅在小屏显示。

设置「随机文章/相册」入口位置

  • 可选不显示导航栏右下角。点击可随机跳转到一个相册/一篇文章。

站点「图标」设置

  • 填写站点favicon的路径,用来自定义站点图标。

设置「标签」样式

  • 可选单色和彩色两种详情页标签样式。

设置「首次访问」提示页

  • 设置启用或停用「首次访问」提示页

填写「首次访问」提示页自定义代码

  • 支持标准 HTML(5) 格式的代码,用于创建页面结构。
  • 示例代码①:
<h1 class="fv-title">FBI WARNING</h1>
<p class="fv-content">FBI Warning Federal law provides severe civil and criminal penalties for the unauthorized reproduction,distribution,or exhibition of copyrighted motion prictures(Title 17, United States Code, Sections 501 and 508). The federal bureau of Investigation investigate allegations of criminal copyright infringement.<br>
(Title 17, United States Code, Section 506)</p>
<p class="fv-content"><button class="fv-ok" onclick="cookieSet('firstVisiting', 156518603, 1);location.reload();">OK</button><button class="fv-no" onclick="cookieDelete('firstVisiting');location.href='https://siitake.cn/';">EXIT</button></p>
  • 示例代码②:
<div class="fv-logo"></div>
<div class="fv-nav fv-antiselect">
    <ul>
        <li><a target="_blank" href="https://blog.siitake.cn">博客</a></li>
        <li><a target="_blank" href="javascript:cookieSet('firstVisiting', 156518603, 1);location.reload();">图库</a></li>
        <li><a target="_blank" href="http://one.siitake.cn">网盘</a></li>
    </ul>
</div>
<div class="fv-footer">
    <p class="fv-icp fv-antiselect">
        <p>陕ICP备17001968号</p>
    </p>
</div>

注:按钮调用的cookieSet('firstVisiting', 156518603, 1);cookieDelete('firstVisiting');方法用于操作cookie,结合后台代码控制是否显示。


填写「首次访问」提示页自定义样式

  • 支持标准 CSS(3) 格式,用于控制页面样式。
  • 示例样式①:
#firstVisitingPage { background-color: black; color: white; }
.fv-title { display: block; width: 270px; margin: 120px auto 40px auto; text-align: center; background-color: red; padding: 5px; }
.fv-content { display: block; width: 70vw; margin: 10px auto; font-size: 32px; text-align: center; }
.fv-ok { margin: 5px; background-color: green; min-width: 100px; }
.fv-no { margin: 5px; background-color: red; min-width: 100px; }
@media screen and (max-width: 767px) { .fv-content { font-size: 18px; } }
@media screen and (max-width: 320px) { .fv-title { width: 220px; margin: 60px auto 15px auto; font-size: 26px; } }
  • 示例样式②:
#firstVisitingPage { height: 100vh; background: -webkit-linear-gradient(pink, plum); background: -o-linear-gradient(pink, plum); background: -moz-linear-gradient(pink, plum); background: linear-gradient(pink, plum); font-size: 1em; }
.fv-logo { width: 320px; height: 320px; margin: calc(50vh - 250px) auto 30px auto; background-color: palevioletred; background-image: url('https://siitake.cn/tools/weiboAvatar/?uid=6185985582'); background-position: center; background-size: cover; border: 10px solid white; border-radius: 320px; }
.fv-nav { text-align: center; }
.fv-nav ul { list-style: none; padding-left: 0; }
.fv-nav li { display: inline-block; }
.fv-nav a { display: block; color: palevioletred; padding: 5px 10px; margin: 5px; background-color: white; border-radius: 3px; text-decoration: none; font-size: 1.5em; transition: all .5s; }
.fv-nav a:hover { color: white; background-color: palevioletred; }
.fv-footer{ width: 100vw; height: 30px; position: fixed; bottom: 30px; text-align: center; }
.fv-icp { font-size: .75em; line-height: 2px; color: white; }
.fv-antiselect { user-select: none; -ms-user-select: none; -moz-user-select: none; -webkit-user-select: none; }

快捷键设置

  • 设置网站键盘快捷键功能,请按照「按键|功能描述|执行代码」的格式,一行一个填在此设置项的文本框内。
  • 可直接填写按键或组合键的名称,不必填写键值,例如:T5[ESCENTERCTRL+R等。
  • 执行代码支持标准javascript代码,但不支持声明函数。
  • 示例:
H|返回首页|location.href = "/";
T|跳到顶端|$("html ,body").animate({scrollTop: 0}, 300);
B|跳到底部|$("html ,body").animate({scrollTop: document.body.scrollHeight}, 300);
Ctrl+R|随机文章|location.href = randomPost;

自定义字段

Photograph - Typecho相册主题使用文档-Npcink
Photograph typecho相册主题自定义字段设置截图

「相册/图文」模式选择

  • 前台文章详情的显示方式,可选相册(默认)图文(与单页排版一致)两种模板。

图片[title]

  • 选择前台图片标签的title属性值,图片源为内容的title默认为文章标题序列,标题序列指的是在标题文字后添加形如[1]的序号

图片源

  • 选择前台展示的图片源
  • 选择附件则只读取 Typecho 原生或插件附件中的图片。
  • 选择内容则只读取文章正文文本框中填写的外链图片。
  • 选择附件+内容则内容(外链)图片在前。
  • 内容(外链)图片支持MarkdownHTML标准格式,不支持纯 URL
  • 示例:
<img src="https://ws1.sinaimg.cn/mw1024/006v3k7fly1g2zhxz8bvfj34o03401ky.jpg">
![图片](https://ws1.sinaimg.cn/mw1024/006v3k7fly1g2zhxz8bvfj34o03401ky.jpg)

作者/来源

  • 填写照片拍摄照片者的姓名、图片来源等信息。

来源地址

  • 填写图片出处URL,留空则不链接地址。

出镜人物

  • 填写照片/图片出镜者信息。

处理软件

  • 选择照片/图片后期处理用到的软件。

打包下载

  • 在这里填写图片打包下载URL,留空则不显示。

打包下载链接名

  • 自定义图片打包下载链接文字,留空则显示打包下载

图集描述

  • 填写照片描述等其他信息,支持HTML

封面图片

  • 填写封面图片的地址,留空将自动获取第一张图片。

是否隐藏部分图片

  • 可设置相册详情隐藏部分图片并登陆后可见

隐藏图片位置

  • 填写整数,从此位置的图片开始隐藏。

设置「不一样の列」

  • 页面共12列,设置第N张图片超小屏、小屏、中屏、大屏所占列数,示例:2:12,8,6,6。示例

阅读次数

  • 记录相册被点击的次数,可手动设置起始阅读量,后续点击会在此基础上自增。

以上就是这款Typecho相册主题使用介绍的全部内容了。

Typecho

Amaze-基于 AmazeUI & 小专栏 的 Typecho 主题

2019-1-3 23:20:19

Typecho

jrotty - typecho主题开发文档

2019-2-10 0:18:47

⚠️
Npcink上的部份代码及教程来源于互联网,仅供网友学习交流,若您喜欢本文可附上原文链接随意转载。
无意侵害您的权益,请发送邮件至 link@baimu.org 或点击右侧 私信:Muze 反馈,我们将尽快处理。
0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索