能否为 fine art 图片站点做优化？

[YIN-Renlong]

请问 hexo 的 "custom layout" 是否可以理解为 hexo 层面的 "class=" （非 theme 层面）？我想实现的功能如下：

鄙人站点约以90%的图片，加上剩余10%的文字部分，因而需对图片排版进行优化。 hexo 的 hexo new [layout] 命令（是否？）只能修改 title date tags 数据，而无法作用于 html 结构？

• 因相片拍版不需命名，我预想的解决方案为：在 post 中，取消 class=post-header，只保留 class=post-body。若可，此条则解决了图片排版的问题；
• 但若写文字，则不应受以上其影响（均保留 class=post-header 和 class=post-body）

预想从 tumblr 迁移过来，原站如下，还请参考：
https://yin.roma.it

[chitanda]

直接改layout的模版是做不到这样的。不过你可以自定义输出页面。
到blog\themes\next\layout\_macro\post.swig文件里把你要删的部分删掉就是了

---

但是只想要photo无header而article有的话，这个可能做起来就比较麻烦了。主题应该是只负责layout样式，这部分逻辑判断可能是hexo做的？不过对hexo没深入到源码的层次，无能为力

[YIN-Renlong]

预想的逻辑是 hexo new post 输出普通 post， hexo new pic 输出无 header 的 post （删除 header，使用自定义 pic 的 layout），请问这样是否可行？

[YIN-Renlong]

若输入hexo new pic pic-test，会生成 ~/blog/source/_posts/pic-test.md
在 pic-test.md 中的 layout=pic 只是一个用于解析的类别声明。比如 layout=post 的话，则该markdown 会以 theme name/layout 目录下的 post.swig 作为模板来解析。
所以现在能做的是需要在 layout 目录下新建一个符合要求的 pic.swig 模板，问题时我不会写具体的代码。。。

[iissnan]

预想的逻辑是 hexo new post 输出普通 post， hexo new pic 输出无 header 的 post （删除 header，使用自定义 pic 的 layout），请问这样是否可行？

这个想法是可行的，需要两个处理：

1. 新建 pic 的 scaffold，这个 scaffold 包含自定义的 type，例如 type: pic
2. 修改 post.swig，当碰到 type 是 pic 就不输出 post-header。从目前的 NexT Layout 代码来说（post.swig 文件第七行），修改应该是：

{# Not to show title for quote posts that do not have a title #}
{% if not (is_index and post.type === 'quote' and not post.title) or not post.type === 'pic' ) %}
   ...
{% endif %}

这个方法适用于你的需求。正如以上代码所示，type: quote 的文章同样不会输出 post-header，你可以试试新建一篇 quote type 的文章：

title: To fail to plan is to plan to fail
type: quote
---

To fail to plan is to plan to fail

---

题外话

从长远来看，通过 post-type 来指定是否输出 post-header 是一种做法。我建议是新增一个 front-matter 来控制是否输出头部，例如 post_header: true/false。

[iissnan]

在 layout 目录下新建一个符合要求的 pic.swig 模板

这也是一种方式，但这种方式的 effort 会比直接修改 next\layout\_macro\post.swig 来得大

[YIN-Renlong]

多谢帮助。已试验你的方法，现发现问题有二：

• 当定义 scaffold 后，加入代码 {% if not (is_index and post.type === 'quote' and not post.title) or not post.type === 'pic' ) %} 后，hexo g 会有 Unhandled rejection Error: Mismatched nesting state on line 7 in file /blog/themes/next/layout/_macro/post.swig. 错误；
• 还原上条后，hexo new 在 source/_post 新建文件默认格式为 layout: quote，而不是 type: quote。若输入前者，则 quote 依旧无 无header 的效果；（手动）输入后者则正常显示 (输出 无header)

[YIN-Renlong]

另一疑惑：相片发布不写标题，但在归档上会出现未命名来显示此文档。请问能否以相片缩略图的形式（或更佳的方案）替换未命名字样？

@iissnan

[iissnan]

我来加这个特性吧，请等待更新

[YIN-Renlong]

我暂时用 ☭ 代替了 title，如图

期待你的解决方案 : )

---

另，相片模版除了单张相片外，还有组照（2 张或以上为作为一组，如此处一、三和四组）。这是相片博客的思路，还望参考。

[YIN-Renlong]

关于相片博客排版逻辑的设计思路有二：

• 相片主页展示；点击相片后，进入二级页面 domain.com/img/img-1，此时相片全屏显示；下一步为点击返回，此时链接为 domain.com/post/img-1，显示全页面 (post) 内的单张 (specific) 相片。此逻辑参考 Tumblr ；
• 主页展示，定义 javascript:void(0) (或类同的做法) 禁止点击图片进入下一级目录；同时设置图片的装饰性属性（例如 hover 的 transition）。

对 Fancybox 在首页即可点击放大的展示逻辑不太苟同。图片要么多级目录（庄重感），要么仅主页展示（一级都没有）

个人愚见，供参考。

[iissnan]

@Renlong-Yin 你提到的排版方面我觉得：

1. Tumblr 的做法很奇怪
2. 第二种方案如何查看图片的原始尺寸是个问题

我的想法是在对于这个类型的 post，在主页显示时将会有一个链接，例如 domain.com/post/something（这个链接的可点击区域包含所有被展示出来的图片），点击这个链接跳转到 post details 页面，在 details 页面包含所有的图片，每一张图片可以使用 fancybox 或者直接给图片的地址。归档页面可以使用同样的处理方式，比较统一。

这个想法中有几个问题：

1. 主页的显示问题。我看了下你提到的组照，貌似都是 3 张一组。那么如果组照是 2 张，或者多于 5 张时怎么去显示；如果组照包含 10 张以上是否都需要显示，还是只是选取其中的部分（也就是说会有一个最大张数的限制）。
2. 对于 writer 来说，插入图片时最简便的方式就是直接写图片的引用，例如：

![alt](/path-to-image)

在这种情况下，NexT 就必须对这个类型底下的所有图片进行一次 filter，给图片带上链接，但可能会有 side effects（例如给非照片等图片加上链接）。所以这里的问题是，writer 是否需要在 post.md 里面写上图片的链接，这种写法很繁琐（Hexo 的 Tag Plugin 是一种快速输入的方式，但为了保证最大的内容可迁移性，NexT 并不希望提供过多的 Tag Plugins ）：

[![alt](/path-to-image)](/path-to-image)

若由 NexT 来做 filter，就必须做一种约定，这个约定可以是这种类型的 post 内所有图片进行 filter，或者对某个区域的图片做 filter。

[YIN-Renlong]

@iissnan

• 关于组照的排布参考如下：

• 张数相同，但排法相异的情况： Tumblr 中的解决办法是拖动排布。请问 markdown 中可使用的方法是？
• 建议对组照在首页均以全部显示的方式
• 能兼容10张相片，大概能满足组照 90% 的要求了

• 点击图片进入 post detail 后，可展示 larger size。但非必须展示原尺寸
• Archive 的想法为：若 post 为文档， archive 中显示标题；若 post 为相片，archive 中显示相片的缩略图
• Fancybox 的点击放大是显得很重复的一个功能，从逻辑上讲的话。平铺（单张），或列表（cover flow）在 detail 展示中会更佳
• post detail 的 url 暂时用相片默认编号（例如：domain.com/2015/07/0931/，0931 即相片编号）代替了。若不想为相片或组照取名，那实在想不出办法
• 不管是单张，还是组照，均用一个 post.md 表达。以 md 为单位进行 filter 是不错的办法

此致

[iissnan]

排列方式在 Hexo 里估计要使用自定义的 Tag Plugin 来支持，给截图中的各种排版方式命名，然后在 Markdown 里调用。例如：

{% imagegroup 3-01 %}
![alt](/path/to/image1)
![alt](/path/to/image2)
![alt](/path/to/image3)
{% endimagegroup %}

其中 3-01 代表排版截图中第一种形式。这种方式使用起来还是不如 Tumblr 的方便。有更好的 Idea 吗？

[YIN-Renlong]

@iissnan

• 我的想法和你的想法大致相同。变通的思路是：在主页的 post 5X 和 5x 以下用 Tag Plugin 排列（因 5X 可以囊括 80% 的组照了），5X 以上的只选择开头的第一种吧（条理最清晰的一种）。这样也为你省下很多工作了

上面提到的排列顺序仅为首页的展示方式，post detail 以所有相片相同大小垂直排列为佳

两个细节：

• 因相片无标题，所以 post detail 中可 disable Previous 和 Next 等 pagination（pagination 仅应在主页出现）。
• 首页 post 统一的应该是相片的宽度（而不是高度。此条是对竖版相片的优化而言）

[iissnan]

Nice，这周先出一个版本看看效果

[YIN-Renlong]

@iissnan

相片展示是否有意采用 Fluidbox？

[iissnan]

@Renlong-Yin 与 Fancybox 类似的效果？

[YIN-Renlong]

@iissnan
比 fancybox 还是好看一些的吧，对于图片站来说（令人头疼的fancybox 3px 白色默认边框）。

[YIN-Renlong]

@iissnan
请问是否方便告知优化进度如何？

[xuecat]

@Renlong-Yin 你在13楼发的组图排列方式的图片无效了。我正忘了这方式，能请你重新发一次吗？

[YIN-Renlong]

@xuecat 不好意思，我也忘记了原图链接（试了几个缓存也不见效）。不过找到了一张类似的图片，请参考:

https://s-media-cache-ak0.pinimg.com/736x/ec/b8/9d/ecb89dc04e41675a55720c70f9222eab.jpg

[ivan-nginx]

Solved in #931.