Photograph - Typecho 相册主题使用文档

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

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

关于售后

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

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

安装主题

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

Typecho 部分

• 若您需要上传图片附件，则需要勾选允许上传的文件类型设置下的图片文件 (gif jpg jpeg png tiff bmp)项目。

• 建议将每页文章数目设置为12篇(或 12 的整数倍)，可以保证相册列表在6 列(6*2)、4 列(4*3)、3 列(3*4)、2 列(2*6)状态下都对齐显示。

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

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

Photograph 部分

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

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

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

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

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

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

• 选择是否隐藏设置菜单中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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

• 测试功能，暂无描述

• 如果需要自定义添加导航栏菜单，请按照名称|地址|是否新窗口打开(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',%20156518603,%201);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; }

• 设置网站键盘快捷键功能，请按照「按键|功能描述|执行代码」的格式，一行一个填在此设置项的文本框内。
• 可直接填写按键或组合键的名称，不必填写键值，例如：T、5、[、ESC、ENTER、CTRL+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;

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

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

• 选择前台展示的图片源。
• 选择附件则只读取 Typecho 原生或插件附件中的图片。
• 选择内容则只读取文章正文文本框中填写的外链图片。
• 选择附件+内容则内容(外链)图片在前。
• 内容(外链)图片支持Markdown和HTML标准格式，不支持纯 URL。
• 示例：

<img src="https://ws1.sinaimg.cn/mw1024/006v3k7fly1g2zhxz8bvfj34o03401ky.jpg">

![图片](https://ws1.sinaimg.cn/mw1024/006v3k7fly1g2zhxz8bvfj34o03401ky.jpg)

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

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

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

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

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

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

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

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

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

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

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