Snapic Plus v5 使用文档

2023年10月18日

demo-snapic-plus-v5.jpg


版本型号:Snapic Plus v5
适用程序:Typecho
皮肤类型:主题模板
模板作者:Lopwon
作者博客:Lopwon.com
发布页面:Lopwon.com/snapic.html
官方演示:Snapic.cn *
网友案例:Snapic Case

我要购买:65元/域名,价格为单个授权域名(不可变更)下使用主题的费用,版本 v5.0.2
协议须知:协议 / 须知
著作权号:2024SR0760880
我要升级:前往升级

* 演示站为 v5.1.0 开发版,个别功能(如:点赞喜欢、置顶文章、海报生成、灯箱滚轮翻图等)尚未在 v5.0.2 正式版放出,请知悉!

重要提示:勿留 Gmail 邮箱,会被退信。


主题说明

Snapic Plus 是 Typecho 相册主题,适用于展示摄影、设计、绘画等图像作品,以视频 / 音频为辅,v5 为最新版本号。详见《Typecho 相册主题 Snapic Plus》介绍。


主题更新

提示:在 v5 基础上升级新版的用户,请在接收 v5 文件包的邮件中,使用回复的方式发送「获取新版」。

Snapic Plus v5.1.0 开发版(制作中)


    · 新增:点赞喜欢、置顶文章、全屏图墙;
    · 新增:海报生成、画廊聚合、地图索引;
    · 新增:提示气泡,在图集加载完成之后,于左下角弹出信息,并可点击打开对应的组图灯箱;
    · 新增:滚轮翻图,在组图灯箱可用鼠标滚轮翻图,感谢(水木星河)提出建议;
    · 新增:缩略导览,在组图灯箱显示缩略图指示器,感谢(又加)提出建议;
    · 新增:显示拍摄镜头品牌和型号信息 Exif 数据,感谢(飞鱼)提出建议;
    · 替换:社交 SNS 的提示内容为名称部分,感谢(DemoChen)提出建议;
    · 修正:一些问题(检测中……),感谢(666GE)反馈;
    · 优化:一些样式;
    · 待办:瀑布流渲染问题,感谢(Tianhao Li)反馈;

2024年05月10日 发布 Snapic Plus v5.0.2

· 修正已知问题,感谢(pandomain | 念舒 | shaco)反馈及协助调试;
· 修正已知问题,感谢(伍田)反馈;
· 优化一些样式。

2024年05月01日 发布 Snapic Plus v5.0.1

· 修正已知问题,新增对 webp 格式图片创建缩略图资源的功能。

2024年04月25日 发布 Snapic Plus v5.0.0

· 升级更新明细见 这里 过往版本升级见 这里


使用方法

敬告 任何对主题文件的变动和对文件代码的修改,都可能导致主题无法正常运行,请知悉!

重要:
    
    · 主题 Snapic Plus v5 独立运作,与旧版主题无关联,主题 Snapic Plus v5 的所有配置以本页为准。

    · 如果停用旧版主题后,可以删除文件夹 SnapicPlus 或 SnapicPlus_2022

提示:

    · 主题 Snapic Plus v5 的大部分功能,可以选择性使用,基本也只需要一次性的设置。

    · 以下信息量较大,根据需要搜索关键词挑选阅读。

A 部署文件

请将主题文件夹 SnapicPlus_v5 上传至目录 usr/themes 中,在后台启用即可。

B 配置页面

〇、知识(必读项)。

1. 插入图片、文本链接,可以使用编辑器自带的功能按键,也可以使用 Markdown 语法:

    1) 插入图片 Markdown 语法:

       ![图片描述](图片链接)

    2) 插入文本链接 Markdown 语法:

       [文本内容](文本链接)

    3) 二者区别:一个前面带 ! 一个不带

2. 重要:插入媒体时,请使用与插入图片相同的编辑器自带的功能按键,或 Markdown 语法:

    1) 插入媒体 Markdown 语法:

       ![媒体描述](媒体链接)

    2) 此方法仅限 Snapic Plus 主题使用。

3. 在 Typecho 中,文章、独立页(或称单页)、附件、分类、标签、用户、评论,都有各自的标识和编码:

    1) 文章、独立页(单页)、附件,使用标识 cid

    2) 分类、标签,使用标识 mid

    3) 用户,使用标识 uid

    4) 评论,使用标识 coid

    5) 进入各自的编辑页面,在「地址栏」的链接末端,通常能找到对应的编码,形式如:cid=888 / mid=666 / uid=1 / coid=333 等。

4. 本页中,提到的页面缩略名指的是什么?

    1) 后台》设置》永久链接,确保「独立页面路径」中,只包含 {slug} 如默认的 /{slug}.html

    2) 进入独立页面的编辑页,在「标题栏」下方的链接处,待填写的即是:页面缩略名。

5. 因 Typecho 有 AutoP 机制,在「内容文本框」中使用 html 标签和属性自定义文本样式或结构时,需要注意:

    1) 可以使用内联元素,如 <span> <a> <b> <i> <sup> <sub> 等。

    2) 禁止使用块级元素,如 <div> <p> <h1> <li> 等,否则会被拆分为 <p></p> 段落,导致无法如预想的输出内容。

    3) 具体是哪些会被作为段落的 html 标签,哪些又是没有段落能力的 html 标签,详见文件 var\Utils\AutoP.php(请自行研究)

一、首屏(可选项)。

1. 后台》管理》独立页面》新增,新建独立页面,除以下提到的事项外,其余正常操作即可。

2. 页面缩略名必须填入 topic,乱填无效!

3. 请严格按照以下(图文块)格式要求在「内容文本框」中输入内容,才能在前台正确输出。

![图片描述](图片链接)

以上是插入图片,这里是图片介绍,以下必须使用编辑器插入分割线的按键,插入分割线作为结尾;

否则,在插入多张图片时,图片介绍无法正确匹配对应的图片。

----------

4. 以上是在(首屏)中插入单张图片和图片介绍的基础格式,以下是示例:

![图片一](图片一链接)

这里是图片介绍,可以选择性输入,可以使用编辑器插入链接的按键,插入文本链接,也可以使用格式 [文本内容](文本链接) 插入文本链接。

----------

![图片二](图片二链接)

这里是图片介绍,可以使用 <span style="这里是 css 样式">文本内容</span> 自定义文本内容的样式,如:位置、字体、大小、颜色等。

----------

5. 在完成新增(首屏)页面后,返回该页面的编辑页,在自定义字段区域,可用拓展功能,其中,首屏来源的(文章)操作如下:

    1) 后台》管理》标签,新增标签,该标签将用于标记需要呈现在(首屏)的文章。

    2) 其中,标签名称自定义(如:首屏推荐),在标记文章时,要使用该标签。标签缩略名,必须填入 digg,乱填无效!

    3) 给需要呈现在(首屏)的文章,添加在上一步新增的标签(如:首屏推荐)。

二、关于格子(可选项)。

1. 后台》管理》独立页面》新增,新建独立页面,除以下提到的事项外,其余正常操作即可。

2. 页面缩略名必须填入 about,乱填无效!

3. 在「内容文本框」中输入内容,无格式要求,其中,如果内容中包含多张图片时,前台则随机显示其中一张。

4. 选择性使用摘要分割线 <!--more--> 分割内容:

摘要分割线之前的内容,将在前台的(关于)格子里,直接显示。

<!--more-->

摘要分割线之后的内容,以及之前的内容,将在前台的(关于)格子里,通过点击 more 在滑窗(或新窗口)中,全部显示。

5. 在完成新增(关于)页面后,返回该页面的编辑页,在自定义字段区域,可用拓展功能,其中,竖线后的内容部分,在使用 HTML 标签和属性时,需注意如下:

     · 可以使用内联元素,如 <span> <a> <b> <i> <sup> <sub> 等。

     · 禁止使用块级元素,如 <div> <p> <h1> <li> 等。

     · 标记换行请用 br 和 / 间带有空格的换行符 <br />

     · 添加文本链接,请用 <a href="链接">文本内容</a>

     · 添加邮箱链接,请用 <a href="mailto:邮箱">文本内容</a>

     · 定义文本样式,请用 <span style="这里是 css 样式">文本内容</span>

三、节气(可选项)。

1. 后台》管理》独立页面》新增,新建独立页面,除以下提到的事项外,其余正常操作即可。

2. 页面缩略名必须填入 24ST 或 24st,乱填无效!

3. 在「内容文本框」中输入内容,无格式要求。

4. 在完成新增(节气)页面后,返回该页面的编辑页,在自定义字段区域,可用拓展功能。

5. 注意:此编辑页面右侧的「附件」里,请在节气日的时候,上传当天拍摄的照片(不需要插入「内容文本框」中)。

6. 重要:节气签卡功能,需要服务器 PHP 环境的 Exif 扩展支持。

四、地图(可选项)。

1. 后台》管理》独立页面》新增,新建独立页面,除以下提到的事项外,其余正常操作即可。

2. 页面缩略名必须填入 map,乱填无效!

3. 在「内容文本框」中,插入一张图片,作为菜单滑窗中,地图的封面输出。

4. 在完成新增(地图)页面后,返回该页面的编辑页,在自定义字段区域,可用拓展功能。

5. 展示:使用自定义字段 point 添加拍摄坐标点的所有文章,都会在该地图页面显示。

6. 重要:拓展功能的(图片图标)请勿使用过大的数值,否则,在打开地图页面时,会同时加载这些图片量,可能会导致卡顿。

7. 提示:选择性自定义地图样式,

    1) 在操作以下(四、地图接口)后,进入百度地图开放平台(https://lbsyun.baidu.com/)的「控制台」。

    2) 特色服务平台》个性化地图》新建,根据喜好自定义地图,发布样式后将获取样式(ID)。

8. 注意:主题设置外观里,需要先正确配置地图接口。

五、画廊/图墙(可选项)。

1. 后台》管理》独立页面》新增,新建独立页面,除以下提到的事项外,其余正常操作即可。

2. 自定义模板,请选择画廊 Gallery for Snapic Plus 或图墙 Montage for Snapic Plus

3. 在「内容文本框」中,插入图片,选择性输入你对画廊/图墙的介绍,支持使用纯文本、插入链接等。

4. 在完成新增(画廊/图墙)页面后,返回该页面的编辑页,在自定义字段区域,可用拓展功能。

5. 提示:理论上,可以建立很多个全屏画廊/图墙。

C 配置主题

一、设置外观(可选项)。

后台》控制台》外观》设置外观,依喜好设置即可。

二、异常提示(说明项)。

在制作主题 Snapic Plus v5 时,加入了一些逻辑判断的功能,用于在主题使用中的操作提示,遇到时,按照步骤进行即可。

三、链接拓展(可选项)。

1. 使用格式(名称|链接)自定义链接,如:

Instagram|https://www.instagram.com

2. 以上输出带有链接 https://www.instagram.com 的文本内容 Instagram 即:文本链接。

3. 当名称部分(如以上的 Instagram)与文件夹 img/link 中图标(instagram.svg)的文件名(instagram)匹配时,则输出图标链接。

4. 重要:仅限使用 svg 和 png 格式图标。

    1) 是 svg 格式时,输出黑色或白色图标,适合用做 SNS 图标,建议添加黑色的 svg 格式图标。

    2) 是 png 格式时,输出原色图标,适合用作友链图标,建议添加小尺寸的方形 png 格式图标,如 100×100px 

5. 提示:文件夹 img/link 中已内置常用的 SNS 图标。

四、引入字体(可选项)。

1. 引入字体,仅限全字体文件,即包含所有中文、西文、其他字符等内容的单个文件。

2. 提示:使用引入字体功能时,也需要先加载该字体文件。

3. 如需对局部的指定文本独立使用自定义的字体,详见以下(E、使用技巧)介绍。

五、地图接口(可选项)。

1. 访问百度地图开放平台(https://lbsyun.baidu.com/)注册后登陆「控制台」。

2. 应用管理》我的应用》创建应用,需要实名认证!

3. 除「应用类型」选择「浏览器端」外,其他可以默认。

4. 完成创建后,会生成一串 API 秘钥(AK)。

5. 提示:境外服务器有可能无法正常使用百度地图 API 接口,导致主题中与地图相关的功能失效。

六、图片描述(可选项)。

1. 当使用编辑器插入图片的按键,在「内容文本框」中插入图片时,会自动添加格式为:

![请输入图片描述][5]

  [5]: http://www.lopwon.com/usr/uploads/2024/02/2097503167.jpg
2. 当使用 Markdown 语法,在「内容文本框」中插入图片时,格式为:

![图片描述](图片链接)

3. 将以上的「请输入图片描述」或「图片描述」重新编辑,即可在图片灯箱中显示自定义的图片描述。

4. 提示:节气的图片描述,需在图片编辑页中添加,如下:

    1) 在节气编辑页面右侧的「附件」里,上传图片后,点击图片附件的「编辑」(铅笔状图标),进入图片信息的编辑页面;

    2) 在右侧的「描述」里,自定义图片描述,提交修改即可。

D 发布文章

一、文章格子(必选项)。

1. 后台》管理》文章》新增,新建文章,除以下提到的事项外,其余正常操作即可。

2. 瀑布流中的每个(文章)格子对应一篇文章,分为:

    1) 单图文章。即文章中,有一张图片,选择性输入文本介绍。

    2) 组图文章。即文章中,有多张图片,选择性输入文本介绍。

    3) 媒体文章。即文章中,有一条媒体(视频 / 音频),选择性输入文本介绍,其中:

     · 当媒体文章中有图片,则作为媒体的封面,多张图片则随机一张;没有图片,视频则默认以第一帧作为封面(注:微信端不支持)。

     · 建议使用与视频比例尺寸一致的图片(如:视频截图),对显示效果无要求的,可无视。

    4) 文本文章。即文章中,仅有纯文本,没有图片也没有媒体。

3. 在「内容文本框」中输入内容,注意事项:

    1) 无论图片或媒体,都需要插入「内容文本框」中,无格式要求,如:

     · 可以使用编辑器插入图片的按键,插入图片或媒体。

     · 可以使用格式 ![图片或媒体描述](图片或媒体链接) 插入图片或媒体。

4. 选择性使用摘要分割线 <!--more--> 分割内容:

摘要分割线之前的内容,将在前台的(文章)格子里,直接显示。

<!--more-->

摘要分割线之后的内容,以及之前的内容,将在前台的(文章)格子里,通过点击 more 在滑窗(或新窗口)中,全部显示。

二、标签分类(可选项)。

1. 在「标签栏」创建格式如(地点 北京)的标签时,即中间使用空格隔开,则标签「北京」会归类到「地点」的类别下。

2. 示例:

菲林 柯达
菲林 富士


3. 那么,在搜索滑窗中的标签云里,标签「柯达」和「富士」会归类到「菲林」的类别下。

4. 重要:当在「标签栏」创建格式如(作者 Lopwon)的标签时,即以「作者」二字作为类别时,标签「Lopwon」除了会归类到「作者」的类别下之外,还会以「Lopwon」首字「L」或自定义图标作为头像展示。

5. 示例:

作者 Lopwon
作者 立云

6. 那么,在搜索滑窗中的标签云里,标签「Lopwon」和「立云」会归类到「作者」的类别下,同时:

    1) 如果主题设置外观里启用了(显示作者),那么,

     · 文章标题左侧和文章图片灯箱,会以「Lopwon」首字「L」或自定义图标作为头像展示,作为该作者归档页入口。

    2) 如果主题设置外观里启用了(共享协议),那么,

     · (文章格子)中的图片区域,以及文章页的图片区域,点击右键时,将显示(by Lopwon)和(by 立云)的特定版权信息。
7. 其中,当标签的 mid 与文件夹 img/avatar 中图标的(数字)文件名匹配时,则输出图标头像,示例:

    1) 假设以上标签(作者 Lopwon)的 mid 为 2

    2) 当文件夹 img/avatar 中存在图标 2.png 时,则输出图标头像,反之以「Lopwon」首字「L」输出。

    3) 图标头像,建议使用小尺寸,如 100px 宽高的 png 图片。

8. 重要:支持主流格式图标,建议使用小尺寸的方形 png 格式图标,如 100×100px

9. 提示:如果博客中旧有的标签,是使用空格创建的,如(Mr Lopwon),那么,该标签也会被拆分为,标签「Lopwon」归类在「Mr」的类别下,此时,可以将(Mr Lopwon)改为(Mr-Lopwon)或(MrLopwon),即取消空格,统一放入标签云的(其他)类别中。

三、内容模块(可选项)。

1. 通过编辑器工具栏前方的拓展按键(P T L C)插入内容模块(面板、签条、排版、多栏),演示如下:

    http://snapic.cn/968.html

2. 其中,四种内容模块(面板、签条、排版、多栏)除了名称不同外,插入格式和使用方法相同,需要注意如下:

     · 需保持原有结构,模块各个标签之间、内容部分之间,禁止有空行;

     · 可以使用内联元素,如 <span> <a> <b> <i> <sup> <sub> 等。

     · 禁止使用块级元素,如 <div> <p> <h1> <li> 等。

     · 标记换行请用 br 和 / 间带有空格的换行符 <br />

3. 以(面板 P)为例,其他内容模块同理。当点击拓展按键(P)后,在「内容文本框」中会插入以下内容模块:

[panels]
[panel title="面板标题"]
面板内容(勿留空行,请用 <br /> 标记换行)
[/panel]
[/panels]

4. 以上是(面板 P)的单组内容模块的基础格式,以下是为做说明而添加了注释,方便理解:

[panels] <!--这里是外层标签开始,注意是带有 s -->
[panel title="面板标题"] <!--这里是子模块标签开始,注意是没有 s -->
面板内容(勿留空行,请用 <br /> 标记换行)
[/panel] <!--这里是子模块标签结束,注意是带有 / 且没有 s -->
[/panels] <!--这里是外层标签结束,注意是带有 / 和 s -->

5. 在每组(面板 P)外层标签的内部,可以创建多条子模块,以下是示例:

[panels]
[panel title="面板标题一"]
面板内容一 <br />
标记换行请用 <br />
![使用插入图片的 Markdown 语法插入图片](https://www.example.com/picture.jpg)
[/panel]
[panel title="面板标题二"]
面板内容二 <br />
<span style="font-size:1.4em;">使用内联元素 span 和 style 自定义文本样式</span> <br />
[/panel]
[panel title="面板标题三"]
面板内容三 <br />
也可以使用编辑器自带的功能按键,插入图片 <br />
[/panel]
[/panels]

6. 提示:内容模块可以组合使用,对文章内容进行丰富的布局,实例如下(请自行研究):

    http://snapic.cn/979.html

7. 重要:如果使用的是第三方的编辑器,那么,内容模块功能有可能无法挂载。

四、拍摄路线(可选项)。

1. 当在文章中使用自定义字段 point 添加拍摄坐标点后,还想展示拍摄路线时,如下:

2. 继续在文章中添加自定义字段,字段名称填入 line 字段值填入一组(经度,纬度):

116.418963,39.894569
116.418217,39.907258
116.409145,39.906982
116.406072,39.906497
116.402587,39.906483
116.398275,39.906719
116.398042,39.909168

3. 提示:每行一条(经度,纬度)坐标,最终将显示为连接各个坐标点的折线。

4. 注意:主题设置外观里,需要先正确配置地图接口。

E 使用技巧

Q:为什么 Snapic Plus v5 不使用 Fancybox 图片灯箱系统?

1. 早期的 Fancybox 还是 MIT 开源项目,随着使用者的不断增加,版本也在更新迭代,功能更是变得强大,当然,新版本的 Fancybox 也需要获得商用许可,才能合理的使用在售卖的主题中。

2. 在经过比对、筛选多款图片灯箱系统后,最终选择了 PhotoSwipe 开源项目,不仅是 MIT 许可,也能满足基础的图片浏览需求,而且,项目也还在维护和更新,在 Lopwon 对其适配及新增功能(如:滚轮翻图、缩略导览等)后,较为理想的融入到了主题 Snapic Plus v5 中。

Q:如何显示浏览器标签页的小图标?

1. 在 Typecho 根目录,放 favicon.ico 和 AppIcon.png 两张图标即可。

Q:什么情况下属于跨域请求资源?

1. 当符合以下情况时,即属于跨域请求资源,由浏览器实施并做出对资源访问的限制,请自行设置存储资源的服务器 CORS 规则,请咨询你的服务提供商。

    1) 不同主域名。如 a.com 请求 b.com 的资源;

    2) 不同子域名。如 a.a.com 请求 b.a.com 的资源;

    3) 不同的协议。如 https://a.com 请求 http://a.com 的资源;

    4) 不同的端口。如 a.com:80 请求 a.com:8080 的资源;

2. 示例:使用 a.com 请求 b.com 的音乐链接,被视为无效音乐链接,音乐不会被正确播放,请将音乐存储在 a.com 域名之下。

3. 示例:使用 a.a.com 请求 b.a.com 的音乐链接,请确保子域之间不存在防盗链规则。

Q:如何增强用户浏览的体验度?

1. 除了用户的网络情况(如:网速)外,合理的优化图片和媒体资源,可以大大增强用户浏览的体验度,建议如下:

    1) 使用 jpg 格式的图片,尺寸宽度控制在 1000px 以内,文件大小控制在 300kb 左右为宜。

    2) 使用 mp4 格式的视频,通过适当的比特率压缩,将时长 1 分钟的视频,文件大小控制在 10mb 以内为宜。

    3) 使用专为图片和媒体资源存储的解决方案(如:图床),这类服务通常会有较大的资源访问带宽,以保障资源的加载速度。

    4) 另外,对于视频类的资源,主题仅适合展示小文件短时长的视频(如:生活旅行片段),不要尽整一些几百兆上驹的电影电视剧文件,这样的资源需要 FFmpeg 切片分段处理才能获得良好的体验。

2. 需要注意的是:如果博客使用 https 加密协议时,图片和媒体资源的链接也请务必使用 https 协议(勿使用 http)。

Q:为什么图片或媒体不显示?

1. 需要先自查图片或媒体的链接是否正确,是 http 还是 https 或是使用了防盗链设置的链接。

2. 如果获取图片和媒体资源存在跨域问题,请自行设置存储资源的服务器 CORS 和 REFERER 规则,请咨询你的服务提供商。

Q:为什么图片不显示 Exif 信息?

1. 首先,需要确保已经开启主题设置外观里的 Exif 任意一项,并确保图片包含 Exif 数据。

2. 其次,如果图片是通过博客文章编辑页面的(附件)功能上传,且未使用任何插件对图片做过编辑(如:加水印、转格式等),那么,在图片(注意是原始图片,非缩略图)加载完成时,自然会正常显示 Exif 数据,如果仍不显示,建议先去买张彩票,中奖概率颇高。

3. 再次,如果图片是存储在其他服务器(如:图床),那么就会存在跨域访问资源的问题,若图片 Exif 数据不显示,先通过浏览器控制台查看是否有与 CORS 相关的错误提示,如果有,请自行设置存储资源的服务器 CORS 规则,请咨询你的服务提供商,如果没有与 CORS 相关的提示,再提交使用反馈。

4. 重要:请勿通过任何插件对图片做编辑(如:加水印、转格式等),如此将大概率地导致 Exif 数据被清除,请使用 Adobe PS/LR 等专业图像编辑软件操作,以保留 Exif 数据。

5. 如果所展示的图片,大部分没有 Exif 数据(如:不是摄影作品的图片),或对显示 Exif 数据没有特别强烈的需求,那么,建议关闭显示 Exif 数据,尤其是在开启(缩略封面)时,因为获取 Exif 数据需要同时加载原始图,这就达不到提高加载速度的目的了,如果对存储资源的服务器性能有自信,请随意。

Q:为什么生成的缩略小图是白底图?

1. 请自查存储资源的服务器,防盗链设置。

Q:为什么通过后台的附件重新上传替换图片后,前台瀑布流的图片没有变化,依然是旧的图片?

1. 当在主题设置外观里,启用了(缩略封面)后,前台瀑布流显示的是缓存在文件夹 thumbs 的缩略图。

2. 此时,可以通过(重制缩略)的方式更新瀑布流中的缩略图。

3. 或找到文件夹 thumbs 中对应的缩略图,删除,通过访问图片所在的瀑布流页面,进而更新缩略图。

Q:什么时候需要自定义文章摘要?

1. Typecho 默认输出的文章摘要,源自文章前面部分,且过滤掉特殊字符后的文本,有时候,这些文本并不能体现该篇文章的内容。

2. 此时,可以选择性添加自定义字段 desc 重新编辑输出更具有针对性的文章摘要。

Q:如何隐藏菜单滑窗中的分类、单页?

1. 隐藏分类:后台》控制台》外观》设置外观,在(隐藏分类)项设置,即可。

2. 隐藏单页:后台》管理》独立页面,进入要隐藏单页的对应编辑页,高级选项》公开度》隐藏,即可。

Q:如何排序菜单滑窗中的分类、单页?

1. 分类排序:后台》管理》分类,鼠标左键长按条目,上下拖动,即可。

2. 单页排序:后台》管理》独立页面,鼠标左键长按条目,上下拖动,即可。

Q:为什么有些图片在手机上显示的方向是正确的,但是使用 Typecho 上传图片后,方向却旋转了呢?

1. 大多数拍摄设备(如:相机、手机)在保存图像时,会记录拍摄时的方向 Orientation 字段信息,以便后续的软件(如:图像查看器)或设备(如:手机)可以根据这个信息,在不修改图像 Exif 数据的前提下,也能以正确地方向显示图像。

2. 例如,在使用手机横向拍摄时,假设为(图片A),那么图片 A 的方向 Orientation 值会记录为:顺时针或逆时针旋转 90 度。当在手机上查看图片 A 时,手机会依据方向 Orientation 值,对图片的显示方向进行纠正,但不会对方向 Orientation 值本身进行修改。

3. 在通过 Typecho 上传图片 A 时,当服务器 PHP 环境中的图像处理库(如:GD 或 Imagick)刚好未启用或未设置,就会导致图片 A 依然保留初始的 Orientation 值显示(而通常情况下,大部分的服务器是能够使用图像处理库正确处理图像的方向 Orientation 值的)。

4. 在通过 Typecho 上传图片 A 时,如果遇到图片方向显示不正确时,可以在上传图片前,使用软件(如:Photoshop ACR)先对图片的显示方向进行纠正,也就是以正确的方向重新保存图片。

Q:如何对局部的指定文本独立使用自定义的字体?

1. 中文字体文件,通常包含所有的中文、西文、其他字符等内容,称为全字体,文件都比较大。

2. 假设只需要对局部的指定文本(如:首屏标题)四个汉字,独立使用自定义的字体时,创建字体子集文件是更好的方案。

3. 这样的字体子集文件仅包含(首屏标题)四个汉字的字体属性,文件相对很小,如下操作:

    1) 将指定文本(如:首屏标题)四个汉字,使用在线「中文转 Unicode 编码」工具,转换为如下编码。

       \u9996\u5c4f\u6807\u9898

    2) 将以上 Unicode 编码改为使用半角逗号隔开的方式,备用。

       u9996,u5c4f,u6807,u9898

    3) 访问 https://transfonter.org/

    4) 上传(Add fonts)全字体文件,除以下提到的事项外,其余默认或自行研究。

     · 字体格式(Formats)默认即可,考虑到不同浏览器的兼容性,也可以全选。
     · 编码范围(Unicode ranges)输入以上备用的编码。
     · 字体目录(Fonts directory)输入存储字体子集文件的文件夹名称,如 myfont
     · 点击转换(Convert)并下载(Download)文件包。

    5) 将下载的文件包内,文件夹(如 myfont)上传至主题文件夹 fonts 中。

    6) 打开文件包内的 stylesheet.css 文件,修正字体子集文件的相对路径。

     · 在所有文件夹名称(如 myfont)的前面添加 ../fonts/
     · 即 ../fonts/myfont/文件名.扩展名

    7) 将以上修正相对路径后的 @font-face {...} 样式代码,复制。

     · 粘贴至主题 css/snapic.font.face.css 文件中。
     · 继续将添加的自定义字体,应用到指定的类名下,参见文件内注释(请自行研究)。

    8) 实例:在文章编辑页「内容文本框」中,使用内联元素定义(首屏标题)四个汉字。

     · 如 <span class="className">首屏标题</span>
     · 注 className 与在 snapic.font.face.css 文件中,所添加的类名保持一致。

F 使用反馈

请使用文字,结合截图,尽可能的把问题描述详细些,前往提交 敬告 任何对主题文件的变动和对文件代码的修改,都可能导致主题无法正常运行,请知悉!

  1. 你好,我想升级最新V5版本

    1. @小稚

      详见文档介绍。

      1. @Lopwon

        没有理解,是没有内测名额了吗

        1. @小稚

          已完成一轮内测,已开放升级。

  2. 现在可以获取新版主题了么

    1. @Cludechn

      详见文档介绍。

      1. @Lopwon

        原先就在用之前主题的老用户,升级新主题有没可以授权多个域名使用

        1. @CludeChn

          已邮件回复。

  3. 你好V4版本可以发我最新V5么7686****@qq.com

    1. @战东海

      详见文档介绍。

2 / 2