跳到主要内容

DJZY Emlog PicShow 主题使用手册

目录

DJZY Emlog PicShow 主题使用手册

适用版本:v1.1.6
本手册面向零基础新手,逐项对照即可完成所有主题设置工作
最后更新:2026-07-15


目录


一、主题简介

DJZY Emlog PicShow 是一款以图片展示为核心的 Emlog Pro 博客主题,适合摄影、设计、插画、壁纸、资源分享等图片密集型站点。

1.1 核心特性一览

特性 说明
7种布局模式 等宽网格、瀑布流双列、瀑布流三列、大图画廊、图文列表、时间线、胶片墙
6种预设风格 极简白、暗夜黑、杂志风、卡片风、国风金、渐变彩
日夜模式 一键切换亮色/暗色,localStorage自动记忆
Hero横幅 首页大图横幅+搜索框+热门标签
轮播图 全宽/双栏两种版面,可配自动播放间隔
图片懒加载 IntersectionObserver API,200px预加载
图片灯箱 全屏预览,键盘←→切换,Esc关闭
无限滚动 自动加载/手动加载/传统分页三种模式
点赞/收藏 服务端持久化,Cookie去重,动画效果
分享功能 优先Web Share API,降级复制链接
Pjax无刷新 DOMParser+pushState,丝滑体验
目录TOC 浮动目录,滚动高亮当前项
代码高亮 Prism.js语法高亮+一键复制
SEO增强 Open Graph、robots.txt、Sitemap.xml
广告管理 11个广告位(8固定+3侧栏)
用户中心 个人资料/文章/收藏/评论/通知/积分/编辑
首字头像 SVG data URI自动生成,无外部依赖
配置导入导出 JSON格式一键备份恢复
响应式设计 断点768/1024/1440px

1.2 系统要求

项目 最低要求 推荐
Emlog Pro 2.6+ Pro 最新版
PHP 7.4 8.1
MySQL 5.6 5.7+
内存 64MB 128MB+
浏览器 Chrome 80+ 最新Chrome/Firefox/Safari/Edge

1.3 设计理念

理念 说明
图片优先 所有布局模式以图片展示为核心,封面图、灯箱、懒加载等全面优化
多布局自由 7种布局+6种风格,用户自由组合,不锁定单一展示方式
轻量高效 前端依赖极低(仅jQuery),无庞大框架,加载快
emlog生态兼容 完全遵循emlog模板开发规范,保留所有官方挂载点
SEO友好 OG标签、JSON-LD结构化数据、Sitemap自动生成
响应式优先 移动端优先设计,三断点(768/1024/1440px)自适应
安全规范 使用Input类获取参数,XSS防护,防直接访问保护
用户体验 Pjax无刷新、日夜模式、无限滚动、阅读进度条

1.4 技术架构

层级 技术 版本要求
后端 PHP 7.4+(兼容8.x)
数据库 MySQL 5.6+
CMS emlog pro 2.6.21+
前端 HTML/CSS/JS 原生+jQuery 3.5.1
图标 Remix Icon 本地化(无外部CDN依赖)
代码高亮 Prism.js 本地化
模板引擎 PHP原生 emlog标准

1.5 文件结构

1.6 功能清单总表

布局系统(7种)

布局 标识 说明 适用场景
等宽网格 grid 固定宽度网格排列 产品展示、设计作品
瀑布流双列 masonry2 两列瀑布流(默认) 图文博客
瀑布流三列 masonry 三列瀑布流 大量图片
大图画廊 gallery 大尺寸封面展示 摄影作品集
图文列表 list 左图右文列表 资讯、教程
时间线 timeline 时间轴排列 日记、记录
胶片墙 film 横向滚动胶片效果 创意展示

风格系统(6种)

风格 标识 色调特征 适合站点
极简白 minimal 白色背景,简洁清爽 技术文档、文字博客
暗夜黑 dark 深色背景,护眼 代码分享、夜间阅读
杂志风 magazine 暖色调,排版精致 新闻资讯
卡片风 card 橙色调,圆角卡片 资源分享
国风金 oriental 金色点缀,中国风 文化、艺术
渐变彩 gradient 彩色渐变,活力动感 创意、设计

首页功能

功能 说明
Hero横幅搜索区 大图横幅+搜索框+热门标签,支持背景色/背景图
轮播图系统 多张轮播图,全宽/双栏两种版面,可配自动播放间隔
布局实时切换 前端工具栏实时切换布局,Cookie持久化个人偏好
风格实时切换 前端工具栏实时切换风格,Cookie持久化
侧栏显隐控制 可控制侧栏显示/隐藏
无限滚动 自动加载/手动加载/传统分页三种模式

图片功能

功能 说明
图片懒加载 IntersectionObserver API,200px预加载,淡入动画
图片灯箱 全屏预览,键盘导航(←→切换,Esc关闭)
图片画廊页 page_photos.php 独立画廊页面模板
封面样式 多种封面图展示样式(默认/全宽/圆角)
相关推荐 文章底部自动推荐同分类文章
缩略图 可配置宽高
无图封面 渐变色占位 或 默认封面图

文章增强功能

功能 说明
TOC目录 浮动目录,滚动高亮当前项,支持h2-h4深度
代码高亮 Prism.js语法高亮+一键复制
点赞系统 服务端持久化,Cookie去重,心形动画
收藏系统 服务端持久化,Cookie去重,星形动画
分享功能 优先Web Share API,降级复制链接
作者卡片 文章底部作者信息展示
面包屑导航 首页 > 分类 > 文章
邻近文章 上一篇/下一篇导航
阅读进度条 顶部进度指示

SEO功能

功能 说明
Open Graph og:title/description/image等社交分享标签
JSON-LD 结构化数据,帮助搜索引擎理解内容
robots.txt 自动生成,引导爬虫
Sitemap.xml 自动生成站点地图
首页SEO 自定义标题/描述/关键词

广告管理(11个广告位)

广告位 位置 独立开关
首页顶部 导航下方横幅
轮播下方 轮播图下方横幅
首页底部 页脚上方横幅
文章顶部 文章标题上方
文章内嵌 正文段落间(可配插入段落位置)
文章底部 文章内容下方
页脚广告 页脚区域
侧栏广告×3 侧边栏3个广告位(可排序) -
全局开关 一键开关所有广告

用户中心(7个路由页面)

路由 功能
/user/profile 个人资料显示
/user/edit 编辑资料(昵称/简介/头像/密码)
/user/articles 我的文章列表(分页)
/user/favorites 我的收藏列表
/user/comments 我的评论列表(分页)
/user/notifications 消息通知(评论通知自动推送)
/user/credits 积分明细

其他功能

功能 说明
日夜模式切换 localStorage记忆用户偏好
Pjax无刷新 DOMParser+pushState,支持前进/后退
首字头像 SVG data URI自动生成,无外部依赖
响应式设计 断点768/1024/1440px
无障碍访问 ARIA标签、skip-nav链接、键盘焦点
配置导入导出 JSON格式一键备份恢复
自定义CSS/JS 后台直接添加自定义代码
CDN支持 可配置CDN URL前缀
背景设置 图片/视频/纯色背景
Sitemap手动生成 后台一键生成Sitemap+robots.txt

二、安装与启用

2.1 方法一:后台上传(推荐)

适用场景:有Emlog后台管理权限

操作步骤

  1. 登录 Emlog 后台

    • 地址通常是:http://你的域名/admin/
    • 输入管理员用户名和密码登录
  2. 进入模板管理

    • 左侧菜单点击 外观
    • 点击 模板管理
  3. 上传模板

    • 点击页面上的 上传模板 按钮
    • 在弹出的文件选择框中,选择 djzy_emlog_picshow.zip 文件
    • 点击 打开,等待上传完成
  4. 启用主题

    • 上传成功后,在模板列表中找到 DJZY Emlog PicShow
    • 点击 启用 按钮
  5. 进入设置

    • 启用后,左侧菜单会出现 主题设置 入口
    • 点击进入,开始配置你的主题

2.2 方法二:手动FTP上传

适用场景:没有后台上传权限,或需要手动控制

操作步骤

  1. 准备FTP工具

    • 推荐:FileZilla(免费)
    • 也可以用宝塔面板的文件管理器
  2. 连接服务器

    • 输入服务器IP、FTP用户名、密码、端口
    • 点击连接
  3. 上传文件

    • 找到服务器上的 /content/templates/ 目录
    • djzy_emlog_picshow 整个文件夹上传到此目录下
    • 注意:是上传整个文件夹,不是里面的文件
  4. 确认文件结构

    • 上传后,目录结构应该是:
      /content/templates/djzy_emlog_picshow/header.php
      /content/templates/djzy_emlog_picshow/footer.php
      ...(其他文件)
  5. 启用主题

    • 登录 Emlog 后台 → 外观模板管理
    • 找到 DJZY Emlog PicShow,点击 启用

2.3 启用后必做事项

⚠️ 重要:启用主题后,请立即进行以下操作!

  1. 进入主题设置:外观 → 主题设置
  2. 选择风格:风格设置 → 主题风格 → 选择你喜欢的风格
  3. 设置LOGO:上传你的站点LOGO或设置自定义文字
  4. 填写SEO信息:SEO设置 → 填写首页标题、描述、关键词
  5. 配置导航:确认导航菜单是否正确显示
  6. 检查首页:刷新前台首页,确认显示正常

三、后台设置总览

进入 外观主题设置,你会看到左侧有 10 个设置标签页:

序号 标签页 图标 设置项数 说明
1 风格设置 🎨 15项 主题风格、LOGO、主色调、背景、Pjax、自定义代码
2 首页设置 🏠 14项 Hero横幅、轮播图、布局、分页
3 图片设置 🖼️ 6项 封面样式、懒加载、灯箱、缩略图尺寸
4 文章设置 📝 8项 目录TOC、代码高亮、点赞、分享、作者卡片
5 SEO设置 🔍 6项 标题/描述/关键词、robots.txt、Sitemap
6 广告管理 📢 19项 全局开关、8个广告位、3个侧栏广告
7 社交链接 🔗 4项 微博、GitHub、Twitter、邮箱
8 导航设置 🧭 4项 导航样式、搜索框、移动端导航
9 页脚设置 📋 5项 备案号、公安备案、版权、友情链接
10 关于主题 ℹ️ 6项 版本信息、更新日志、配置导入导出

共 87 项设置,每项都有中文说明,鼠标悬停可查看详情。

设置界面操作说明

  • 开关类(checkon):点击切换开/关
  • 单选类(radio):点击选择一项
  • 文本类(text):在输入框中输入内容
  • 颜色类(color):点击颜色块弹出取色器
  • 图片类(image):点击上传按钮上传图片
  • 多行文本(multi):在大文本框中输入多行内容

保存设置:修改后点击页面底部的 保存设置 按钮。


四、🎨 风格设置(15项)

风格设置控制主题的整体视觉外观。

4.1 主题风格

设置项类型:单选按钮
选项

风格 效果 适合场景
极简白 白色背景,简洁清爽 文字博客、技术文档
暗夜黑 深色背景,护眼 夜间阅读、代码分享
杂志风 杂志排版风格 新闻资讯、内容媒体
卡片风 现代卡片式布局 综合类、资源分享
国风金 中式金色主题 文化、传统、艺术类
渐变彩 彩色渐变风格 创意、设计、时尚类

操作:点击你想要的风格名称,然后点击保存设置。

提示:切换风格后刷新前台页面查看效果。不同风格的配色、字体、间距都有差异。

4.2 LOGO显示模式

设置项类型:单选按钮
选项

  • 文字模式(推荐):直接在导航栏显示站点标题文字

    • 优点:加载快,SEO友好
    • 可配合下方的"LOGO自定义文字"使用
  • 图片模式:显示上传的LOGO图片

    • 优点:视觉效果好,可展示品牌标识
    • 需配合下方的"LOGO图片"上传功能

4.3 LOGO自定义文字

设置项类型:单行文本
生效条件:LOGO显示模式选择"文字"

填写说明

  • 输入你想在导航栏显示的文字
  • 留空则自动使用Emlog后台设置的站点标题
  • 建议不超过10个字,太长会在移动端换行

示例DJZY资源站我的摄影博客

4.4 LOGO图片

设置项类型:图片上传
生效条件:LOGO显示模式选择"图片"

操作步骤

  1. 点击上传按钮
  2. 选择你的LOGO图片文件
  3. 上传完成后自动显示预览

图片建议

  • 格式:PNG(支持透明背景)
  • 高度:40px左右
  • 宽度:不超过200px
  • 背景:透明或与导航栏背景色一致

4.5 Favicon图标

设置项类型:图片上传

说明:浏览器标签页上显示的小图标,也会显示在书签列表中。

操作

  1. 点击上传按钮
  2. 选择图标文件

图片建议

  • 尺寸:32×32px 或 16×16px
  • 格式:PNG 或 ICO
  • 设计:简洁明了,缩小后仍可辨认

4.6 主题主色调

设置项类型:颜色选择器

说明:主题的强调色,用于以下位置:

  • 链接文字颜色
  • 按钮背景色
  • 选中/激活状态颜色
  • 阅读进度条颜色
  • 点赞/收藏按钮高亮色

操作:点击颜色块,在弹出的取色器中选择颜色,或直接输入十六进制颜色值。

推荐色值

  • 蓝色系:#3b82f6(默认)
  • 绿色系:#10b981
  • 红色系:#ef4444
  • 紫色系:#8b5cf6
  • 橙色系:#f59e0b

4.7 背景类型

设置项类型:单选按钮
选项

类型 效果 说明
无背景 使用风格默认背景 推荐新手使用
图片背景 自定义图片做背景 需配合下方上传背景图
视频背景 视频循环播放做背景 需填写视频URL

4.8 自定义背景图

设置项类型:图片上传
生效条件:背景类型选择"图片背景"

操作:点击上传按钮,选择背景图片。

图片建议

  • 分辨率:1920×1080 或更大
  • 格式:JPG(文件较小)或 PNG
  • 内容:简洁不杂乱,避免干扰文字阅读

配合设置:上传图片后,记得在下方"背景图显示方式"中选择显示效果。

4.9 背景视频URL

设置项类型:单行文本
生效条件:背景类型选择"视频背景"

填写说明

  • 输入视频文件的完整URL地址
  • 支持 MP4 格式
  • 视频会自动循环播放、静音

示例https://example.com/video/bg.mp4

注意事项

  • 视频文件不宜过大(建议<10MB),否则影响加载速度
  • 移动端可能不自动播放(浏览器限制)
  • 如果视频无法加载,会回退显示背景色

4.10 背景图显示方式

设置项类型:单选按钮
生效条件:背景类型选择"图片背景"

方式 效果 适用图片
铺满全屏 图片拉伸铺满整个屏幕 大尺寸风景图
平铺重复 小图片重复排列铺满 纹理、图案小图
固定不动 背景固定,内容滚动时背景不动 视差效果

4.11 头像显示方式

设置项类型:单选按钮

说明:用户(评论者、作者)未上传头像时的显示方式。

方式 效果 推荐场景
Gravatar全球头像 根据邮箱自动匹配Gravatar头像 国际站点
首字头像(推荐) 取用户名首字+随机彩色背景 中文站点
默认头像图 使用上传的默认头像图片 统一风格

首字头像说明

  • 自动取用户名/昵称的第一个字
  • 背景色根据用户名自动生成(同一用户颜色固定)
  • 使用SVG data URI,无需联网,加载极快

4.12 自定义默认头像

设置项类型:图片上传
生效条件:头像显示方式选择"默认头像图"

操作:上传一张默认头像图片。

图片建议

  • 尺寸:100×100px
  • 格式:PNG(圆形头像用透明背景)
  • 设计:简洁通用,如灰色人形轮廓

4.13 启用Pjax无刷新

设置项类型:开关(默认开启)

说明:Pjax是一种页面无刷新加载技术。开启后:

  • 点击站内链接时,页面不会完全刷新
  • 只更新内容区域,导航栏、侧栏保持不变
  • 浏览体验更丝滑,加载更快
  • 支持浏览器前进/后退按钮

建议:保持开启。如果遇到JavaScript兼容问题,可以关闭。

4.14 CDN加速地址

设置项类型:单行文本

说明:如果你使用了CDN(内容分发网络)加速,可以在此输入CDN地址前缀。

填写方式

  • 留空:使用默认地址(服务器直接提供)
  • 填写:输入CDN地址,如 https://cdn.example.com

示例https://cdn.djzy.cc

注意:CDN地址不需要末尾的 /。使用CDN后,主题的CSS、JS、图片等静态资源会通过CDN加载。

4.15 自定义CSS / 自定义JS

设置项类型:多行文本

说明:如果你懂CSS/JavaScript代码,可以在此添加自定义代码来覆盖主题默认样式或添加自定义功能。

使用示例

自定义CSS(修改链接颜色):

a { color: #ff6600; }
.ps-article-title { font-size: 24px; }

自定义JS(添加控制台日志):

console.log('我的自定义脚本已加载');

注意事项

  • 不需要写 <style><script> 标签
  • CSS直接写样式规则
  • JS直接写代码
  • 代码错误可能导致页面异常,请谨慎修改

五、🏠 首页设置(14项)

首页设置控制首页的布局、轮播图、Hero横幅和分页方式。

5.1 显示侧边栏

设置项类型:开关(默认开启)

说明:控制首页和文章页是否显示右侧边栏。

状态 效果
开启 内容区左侧,侧栏右侧(双栏布局)
关闭 内容区占满全宽(单栏布局)

建议

  • 图片展示站:关闭侧栏,图片更大更震撼
  • 资讯/博客站:开启侧栏,展示热门文章、分类等

5.2 首页布局

设置项类型:单选按钮(7种布局)

这是主题最核心的功能之一,控制文章列表的展示方式:

布局 效果描述 最佳搭配 适合站点
等宽网格 每个卡片等宽,整齐排列 图片尺寸统一 产品展示、设计作品
瀑布流-双列 2列瀑布流,卡片高度自适应 图文混合内容 博客、图文分享
瀑布流-三列 3列瀑布流,信息密度更高 纯图片内容 摄影、壁纸站
大图画廊 大尺寸图片展示,视觉冲击力强 高质量大图 摄影作品集
图文列表 左侧小图+右侧标题摘要 资讯类内容 新闻、教程站
时间线 按时间轴排列,带日期标记 时间线内容 日记、日志
胶片墙 胶片风格排列,创意感十足 创意图片 设计、艺术

操作:点击你想要的布局名称,保存后刷新首页查看效果。

5.3 Hero横幅搜索区

设置项类型:开关(默认开启)

说明:首页顶部的大型横幅区域,包含:

  • 站点标题/自定义标题
  • 副标题/描述文字
  • 搜索框
  • 热门标签链接

效果:开启后,首页顶部会显示一个醒目的横幅区域,增强视觉效果和搜索功能。

5.4 Hero横幅背景色

设置项类型:颜色选择器(默认蓝色 #3b82f6)

说明:横幅区域的背景渐变起始色。系统会自动从此颜色渐变到透明。

搭配建议

  • 选择与主题风格协调的颜色
  • 暗色风格:深蓝、深紫
  • 亮色风格:浅蓝、浅绿
  • 国风风格:金色、红色

5.5 Hero横幅背景图

设置项类型:图片上传

说明:横幅区域的背景图片。上传后,背景色会作为半透明遮罩层叠加在图片上方。

图片建议

  • 分辨率:1920×400px 或更大
  • 内容:简洁大气,避免太花哨
  • 如果不上传,则只显示渐变色背景

5.6 Hero横幅主标题

设置项类型:单行文本

说明:横幅区域的大标题文字。

示例多功能多布局 Emlog 主题模板

留空效果:自动使用Emlog后台设置的站点标题。

5.7 Hero横幅副标题

设置项类型:多行文本

说明:横幅区域的描述文字,显示在主标题下方。

示例

资源 / 下载 / 资料 / 教程 · 一站式解决方案

留空效果:自动使用Emlog后台设置的站点副标题。

5.8 首页轮播图

设置项类型:开关(默认开启)

说明:Hero横幅下方的大图轮播幻灯片区域。

5.9 轮播图配置

设置项类型:多行文本

格式说明:每行一张轮播图,格式为:

图片地址|标题|链接地址

三个字段之间用 |(竖线)分隔:

  • 图片地址(必填):轮播图片的完整URL
  • 标题(选填):显示在图片上的文字
  • 链接地址(选填):点击后跳转的URL

完整示例

https://example.com/slide1.jpg|第一张幻灯片|https://example.com/post1
https://example.com/slide2.jpg|第二张幻灯片|https://example.com/post2
https://example.com/slide3.jpg|第三张幻灯片|

注意事项

  • 每行一张图,不要有多余空行
  • 图片URL必须可公开访问
  • 建议图片尺寸一致(推荐16:9比例)
  • 标题和链接可以留空,但 | 分隔符要保留

5.10 轮播图版面

设置项类型:单选按钮

版面 效果 适合场景
全宽模式 轮播图占满整行宽度 大图展示
双栏模式 左侧轮播图+右侧公告栏 需要公告/广告

双栏模式额外设置

  • 右侧栏标题:如"站点公告"
  • 右侧栏公告内容:支持HTML,可写公告文字、链接
  • 右侧栏广告代码:支持HTML/JS广告代码

5.11 轮播间隔时间

设置项类型:数字输入框
范围:1000-30000毫秒
默认值:5000毫秒(5秒)

说明:轮播图自动切换的时间间隔。

建议

  • 图片多:3000-5000ms(3-5秒)
  • 图片少:5000-8000ms(5-8秒)
  • 想让用户仔细看:8000-10000ms

5.12 每页文章数

设置项类型:数字输入框
范围:1-100篇
默认值:12篇

说明:首页每页展示的文章数量。

建议

  • 图片站:8-12篇(图片加载需要时间)
  • 资讯站:15-20篇
  • 瀑布流布局:可以多一些

5.13 分页模式

设置项类型:单选按钮

模式 效果 体验
传统分页 底部显示 1、2、3... 页码 经典,可跳转指定页
手动加载 底部显示"加载更多"按钮 按需加载,节省流量
自动加载 滚动到底部自动加载(无限滚动) 最流畅,适合图片站

建议

  • 图片展示站:自动加载(无限滚动体验最好)
  • 资讯站:传统分页(方便跳转)
  • 移动端为主:手动加载(节省流量)

六、🖼️ 图片设置(6项)

图片设置控制封面图、懒加载、灯箱和缩略图。

6.1 无图封面样式

设置项类型:单选按钮

说明:当文章没有设置封面图,或封面图加载失败时的显示方式。

样式 效果
渐变色占位 使用彩色渐变作为封面背景(每篇文章颜色不同)
默认封面图 使用上传的默认封面图片

建议

  • 图片为主的站点:选择"渐变色占位",更美观
  • 统一风格的站点:选择"默认封面图"

6.2 自定义默认封面图

设置项类型:图片上传
生效条件:无图封面样式选择"默认封面图"

图片建议

  • 尺寸:800×600px
  • 内容:简洁通用,如站点LOGO+纯色背景
  • 格式:JPG(文件较小)

6.3 图片懒加载

设置项类型:开关(默认开启)

说明:开启后,页面上的图片会在滚动到可视区域附近(200px内)时才开始加载。

好处

  • 大幅提升首页加载速度
  • 节省用户流量(特别是移动端)
  • 减少服务器带宽压力

建议:保持开启,对图片站尤其重要。

6.4 灯箱效果

设置项类型:开关(默认开启)

说明:开启后,在文章详情页点击图片可以:

  • 全屏放大预览
  • 键盘左/右箭头切换上/下张图
  • 键盘Esc键关闭灯箱
  • 点击遮罩层关闭

建议:保持开启,提升图片浏览体验。

6.5 相关推荐

设置项类型:开关(默认开启)

说明:在文章详情页底部,自动推荐同分类下的其他文章。

效果:显示4篇相关文章的封面图+标题,点击可跳转。

建议:保持开启,增加页面浏览量。

6.6 缩略图尺寸

设置项

  • 缩略图宽度:数字输入框(默认400px,范围100-1200px)
  • 缩略图高度:数字输入框(默认300px,范围100-900px)

说明:文章列表中封面缩略图的显示尺寸。

建议

  • 瀑布流布局:宽度300-400px
  • 网格布局:宽度300-500px
  • 大图画廊:宽度600-800px
  • 图文列表:宽度200-300px

七、📝 文章设置(8项)

文章设置控制文章详情页的功能,如目录、代码高亮、点赞等。

7.1 文章目录TOC

设置项类型:开关(默认开启)

说明:在文章详情页右侧显示浮动目录,自动提取文章中的标题生成目录树。

功能特点

  • 自动从文章的 h2/h3/h4 标签生成目录
  • 滚动时高亮当前所在章节
  • 点击目录项可跳转到对应位置
  • 响应式:手机端自动隐藏或折叠

7.2 目录深度

设置项类型:单选按钮
生效条件:文章目录TOC开启

深度 包含标题 适用文章
仅h2 只显示二级标题 短文章,结构简单
h2+h3 二、三级标题 中等长度,推荐
h2+h3+h4 二、三、四级标题 长文章,结构复杂

建议:选择"h2+h3",适合大多数文章。

7.3 代码高亮

设置项类型:开关(默认开启)

说明:开启后,文章中的代码块会自动使用Prism.js进行语法高亮显示。

支持功能

  • 多种编程语言语法高亮
  • 代码块右上角显示"复制"按钮
  • 一键复制代码内容
  • 支持行号显示

使用方法:在Emlog编辑器中,使用代码块功能插入代码即可。

7.4 正文最大宽度

设置项类型:数字输入框
范围:600-1400px
默认值:800px

说明:文章正文内容区域的最大宽度。

建议

  • 纯文字文章:700-800px(阅读舒适)
  • 图文混合:800-1000px
  • 代码文章:900-1100px(代码块需要更多空间)

7.5 启用点赞功能

设置项类型:开关(默认开启)

说明:在文章详情页底部显示点赞按钮(心形图标❤️)。

功能特点

  • 服务端持久化(数据存在数据库)
  • Cookie去重(同一用户只能点一次)
  • 点赞时有心形动画效果
  • 显示总点赞数

7.6 启用分享功能

设置项类型:开关(默认开启)

说明:在文章详情页底部显示分享按钮。

分享方式

  • 优先:使用系统原生分享(Web Share API),支持分享到微信、QQ等
  • 降级:不支持原生分享时,自动复制文章链接到剪贴板

7.7 显示作者卡片

设置项类型:开关(默认开启)

说明:在文章详情页底部、评论区上方显示作者信息卡片。

卡片内容

  • 作者头像
  • 作者昵称
  • 作者简介
  • 作者文章数(可选)

7.8 显示面包屑导航

设置项类型:开关(默认开启)

说明:在文章标题上方显示导航路径。

效果首页 > 分类名称 > 文章标题

好处

  • 用户知道当前位置
  • 可快速返回分类页
  • SEO友好(搜索引擎喜欢结构化导航)

八、🔍 SEO设置(6项)

SEO(搜索引擎优化)设置帮助你的站点在搜索引擎中获得更好的排名。

8.1 首页SEO标题

设置项类型:单行文本

说明:设置首页HTML的 <title> 标签内容。

留空效果:使用Emlog后台设置的站点标题。

填写建议

  • 包含核心关键词
  • 不超过30个字
  • 格式:站点名称 - 一句话描述

示例

  • DJZY资源站 - 优质软件资源分享平台
  • 我的摄影博客 - 风光人像摄影作品集

8.2 首页SEO描述

设置项类型:多行文本

说明:设置首页HTML的 <meta description> 标签。

留空效果:使用Emlog后台设置的站点描述。

填写建议

  • 简要描述你的站点是做什么的
  • 包含2-3个核心关键词
  • 100-150字为宜
  • 不要堆砌关键词

示例DJZY资源站提供最新软件下载、教程分享、模板资源、影视短剧等优质内容,每日更新,免费下载。

8.3 首页SEO关键词

设置项类型:单行文本

说明:设置首页HTML的 <meta keywords> 标签。

填写说明

  • 多个关键词用英文逗号 , 分隔
  • 不要超过5-8个关键词
  • 关键词要与站点内容相关

示例资源分享,软件下载,教程,模板,短剧

8.4 自动生成robots.txt

设置项类型:开关(默认开启)

说明:自动在站点根目录生成 robots.txt 文件。

robots.txt的作用

  • 告诉搜索引擎爬虫哪些页面可以抓取
  • 引导爬虫优先抓取重要页面
  • 避免爬虫抓取后台等无关页面

建议:保持开启。生成后可通过 http://你的域名/robots.txt 访问。

8.5 自动生成Sitemap

设置项类型:开关(默认开启)

说明:自动在站点根目录生成 sitemap.xml 站点地图文件。

Sitemap的作用

  • 列出网站所有重要页面的URL
  • 帮助搜索引擎更完整地收录你的页面
  • 可提交到百度站长平台、Google Search Console

访问地址http://你的域名/sitemap.xml

生成时机:管理员登录后台时自动更新。

8.6 Sitemap更新频率

设置项类型:单选按钮
生效条件:自动生成Sitemap开启

频率 说明 适合站点
每天 建议搜索引擎每天检查 更新频繁的站点
每周 建议搜索引擎每周检查 普通更新频率
每月 建议搜索引擎每月检查 更新较少的站点

手动更新:设置页面中有一个"立即生成 Sitemap + robots.txt"按钮,点击可手动触发生成。


九、📢 广告管理(19项)

广告管理功能帮助你在网站的多个位置展示广告,实现流量变现。

9.1 全局广告开关

设置项类型:开关(默认开启)

说明:广告总开关。关闭后,所有广告位都不显示,但广告代码保留不清除。

使用场景

  • 临时关闭所有广告(如促销活动期间)
  • 调试时关闭广告方便查看页面

9.2 广告位一览

主题提供 11个广告位

序号 广告位 位置 建议尺寸 控制项
1 首页顶部 导航栏下方 728×90 代码+开关
2 轮播图下方 轮播图和文章列表之间 970×90 代码+开关
3 首页底部 页脚上方 728×90 代码+开关
4 文章顶部 文章标题上方 728×90 代码+开关
5 文章内嵌 正文段落间(自动插入) 自适应 代码+开关+位置
6 文章底部 文章内容下方 728×90 代码+开关
7 页脚广告 页脚区域 728×90 代码+开关
8 侧栏广告1 侧边栏 300×250 代码+排序
9 侧栏广告2 侧边栏 300×250 代码+排序
10 侧栏广告3 侧边栏 300×250 代码+排序

9.3 固定广告位设置方法

以"首页顶部广告"为例:

步骤1:打开全局广告开关(如果已开则跳过)

步骤2:打开"首页顶部广告开关"

步骤3:在"首页顶部广告"代码框中粘贴广告代码

步骤4:点击保存设置

步骤5:刷新前台首页查看效果

9.4 文章内嵌广告

特殊设置项

  • 文章内嵌广告代码:粘贴广告HTML/JS代码
  • 文章内嵌广告开关:开/关
  • 内嵌广告插入位置:在正文第N个段落之后插入(默认第3段后)

说明:广告会自动插入到文章正文中,不需要手动放置。

建议:插入位置设为3-5,太靠前影响阅读体验。

9.5 侧栏广告设置

侧栏广告有3个独立广告位,每个广告位有:

  • 广告代码:粘贴HTML/JS广告代码
  • 排序位置:在第几个侧栏组件之后显示(0=最前面,99=最后面)

排序示例

  • 排序0:在所有侧栏组件之前显示
  • 排序5:在第5个侧栏组件之后显示
  • 排序99:在侧栏最后显示

搭配建议

  • 侧栏广告1:排序0(侧栏最顶部)
  • 侧栏广告2:排序50(侧栏中间)
  • 侧栏广告3:排序99(侧栏底部)

十、🔗 社交链接(4项)

在站点头部或页脚显示社交平台链接图标。

10.1 微博链接

填写内容:你的微博主页URL
示例https://weibo.com/yourname
留空:不显示微博图标

10.2 GitHub链接

填写内容:你的GitHub主页URL
示例https://github.com/yourname
留空:不显示GitHub图标

10.3 Twitter链接

填写内容:你的Twitter主页URL
示例https://twitter.com/yourname
留空:不显示Twitter图标

10.4 联系邮箱

填写内容:你的联系邮箱地址
示例contact@djzy.cc
留空:不显示邮箱图标

说明:邮箱图标点击后会打开邮件客户端(mailto链接)。


十一、🧭 导航设置(4项)

导航设置控制顶部导航栏的行为和样式。

11.1 导航样式

设置项类型:单选按钮

样式 效果 适合场景
固定导航 滚动时导航栏始终固定在页面顶部 内容较长的页面
静态导航 导航栏随页面一起滚动 首屏内容充足的站点

建议:选择"固定导航",方便用户随时切换页面。

11.2 显示搜索框

设置项类型:开关(默认开启)

说明:在导航栏右侧显示搜索图标。点击后弹出搜索框。

建议:保持开启,方便用户搜索内容。

11.3 移动端导航样式

设置项类型:单选按钮

样式 效果
汉堡菜单 点击☰图标,从侧边滑出导航菜单
底部导航栏 固定在屏幕底部的导航栏

建议:根据你的站点类型选择。底部导航栏更适合APP风格的站点。

11.4 自定义导航菜单项

设置项类型:多行文本

说明:除了Emlog后台自动管理的分类和页面导航外,你还可以在此添加额外的导航链接。

格式:每行一个,格式为 名称|链接|新窗口

  • 名称:导航项显示的文字
  • 链接:点击跳转的URL
  • 新窗口:y=新窗口打开,n=当前窗口打开

示例

关于我们|/page/about|n
友情链接|/page/links|n
外部链接|https://example.com|y

十二、📋 页脚设置(5项)

页脚设置控制网站底部的备案号、版权信息和友情链接。

12.1 ICP备案号

设置项类型:单行文本

说明:填写你的ICP备案号,显示在页脚底部。

示例京ICP备12345678号

留空:不显示备案号。

注意:中国大陆网站必须备案,请到工信部网站进行备案。

12.2 公安备案号

设置项类型:单行文本

说明:填写公安备案号,显示在ICP备案号下方。

示例京公网安备11000002000001号

留空:不显示公安备案号。

12.3 自定义版权信息

设置项类型:单行文本

说明:自定义页脚版权文字。

示例© 2026 DJZY.CC All Rights Reserved.

留空:自动使用站点名称生成版权信息。

12.4 友情链接位置

设置项类型:单选按钮

位置 说明
侧边栏 在侧边栏显示友情链接组件
页脚区域 在页脚底部显示友情链接
同时显示 侧边栏和页脚都显示
不显示 隐藏友情链接

友情链接管理:在Emlog后台 → 链接 中管理友链数据。

12.5 页脚自定义代码

设置项类型:多行文本

说明:在页脚添加自定义HTML/JS代码。

常见用途

  • 网站统计代码(百度统计、Google Analytics)
  • 在线客服组件
  • 备案查询链接
  • 自定义页脚装饰

示例(百度统计):

<script>
var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "https://hm.baidu.com/hm.js?你的统计ID";
  var s = document.getElementsByTagName("script")[0]; 
  s.parentNode.insertBefore(hm, s);
})();
</script>

十三、ℹ️ 关于主题(6项)

关于主题页面显示版本信息,并提供配置导入导出功能。

13.1 当前版本

显示主题当前版本号。

13.2 更新日志

显示主题的版本更新记录。

13.3 作者信息

显示主题作者名称和主页链接。

13.4 配置导出

操作:点击 导出配置 按钮

效果:自动下载一个 JSON 格式的配置文件,包含所有87项设置的当前值。

文件名格式picshow-config-2026-07-15.json

使用场景

  • 换服务器时迁移设置
  • 多个站点使用相同配置
  • 备份以防设置丢失
  • 更新主题前的安全备份

13.5 配置导入

操作

  1. 点击 导入配置 按钮
  2. 选择之前导出的 JSON 文件
  3. 系统自动导入并保存设置

注意事项

  • 只能导入本主题导出的配置文件
  • 导入后会覆盖当前所有设置
  • 导入前建议先导出当前配置备份

13.6 手动更新Sitemap

在SEO设置标签页中,有一个 "立即生成 Sitemap + robots.txt" 按钮。

操作:点击按钮,等待几秒,页面会显示生成结果。

使用场景

  • 新发布了大量文章后
  • 修改了SEO设置后
  • 需要立即更新站点地图时

十四、用户中心

主题内置完整的用户中心功能,通过 /user/ 路由访问。

14.1 用户中心页面

路由 页面 功能
/user//user/profile 个人资料 显示头像、昵称、简介、注册时间
/user/articles 我的文章 用户发布的文章列表(分页)
/user/favorites 我的收藏 用户收藏的文章列表
/user/comments 我的评论 用户发表的评论列表
/user/notifications 消息通知 评论通知、系统通知
/user/credits 积分明细 当前积分、积分变动记录
/user/edit 编辑资料 修改昵称/简介、上传头像、修改密码

14.2 通知系统

当有人回复你的评论时,系统会自动发送通知。通知内容包括:

  • 评论内容摘要
  • 所在文章标题
  • 通知时间
  • 已读/未读状态

14.3 积分系统

积分通过以下方式获取:

  • 发布文章
  • 发表评论
  • 每日签到(如插件支持)
  • 管理员手动添加

十五、页面模板

主题提供自定义页面模板,在创建页面时可以选择。

15.1 图片画廊模板

模板文件page_photos.php

使用方法

  1. 后台 → 页面新建页面
  2. 在右侧"页面模板"下拉框中选择 图片画廊
  3. 发布页面

效果:以图片网格/瀑布流方式展示页面中的图片。

15.2 自定义字段

主题预设了以下自定义字段,在编辑文章时可以使用:

字段名 类型 说明
cover_style 单选 封面样式(默认/全宽/圆角)

使用方法

  1. 编辑文章时,找到"自定义字段"区域
  2. 选择 cover_style 字段
  3. 选择你想要的封面样式

十六、常见问题FAQ(20问)

Q1: 启用主题后页面显示空白怎么办?

原因:通常是PHP版本不兼容。

解决

  1. 登录宝塔面板
  2. 进入 网站 → 找到你的站点 → 设置
  3. 检查PHP版本,确保为 7.4 或以上
  4. 如果是7.4仍有问题,尝试切换到 8.0 或 8.1

Q2: 轮播图不显示怎么办?

排查步骤

  1. 检查"首页轮播图"开关是否打开
  2. 检查"轮播图配置"格式是否正确
  3. 确认图片URL可以公开访问(在浏览器中直接打开URL测试)
  4. 确认每行一张图,没有多余空行
  5. 清除浏览器缓存后刷新

Q3: 图片灯箱不生效怎么办?

排查步骤

  1. 检查"灯箱效果"开关是否打开
  2. 确认浏览器没有禁用JavaScript
  3. 清除浏览器缓存
  4. 如果使用了Pjax,尝试关闭Pjax测试

Q4: 广告不显示怎么办?

排查步骤

  1. 检查"全局广告开关"是否打开
  2. 检查对应广告位的独立开关是否打开
  3. 确认广告代码已正确粘贴
  4. 确认广告代码中的链接可访问
  5. 检查是否有广告拦截插件

Q5: 如何修改主题颜色?

操作:外观 → 主题设置 → 风格设置 → 主题主色调 → 选择颜色 → 保存

Q6: 手机端显示异常怎么办?

排查步骤

  1. 清除手机浏览器缓存
  2. 检查是否有自定义CSS影响了移动端
  3. 确认使用的是现代手机浏览器(Chrome/Safari)
  4. 尝试关闭自定义JS测试

Q7: Pjax是什么?要不要开启?

:Pjax是无刷新加载技术。开启后点击链接不会完全刷新页面,只更新内容区域,体验更流畅。建议开启。如果遇到JavaScript兼容问题(如某些插件不工作),可以关闭。

Q8: 如何备份主题设置?

操作:外观 → 主题设置 → 关于主题 → 导出配置 → 保存JSON文件

Q9: 主题更新后设置会丢失吗?

:不会。主题设置保存在数据库中,更新主题文件不会影响设置。但为了安全,建议更新前先导出配置备份。

Q10: 如何添加自定义页面模板?

:主题支持自定义页面模板。创建页面时,在右侧"页面模板"下拉框中选择即可。目前提供"图片画廊"模板。

Q11: 如何设置文章的封面图?

:编辑文章时,在右侧"文章设置"区域找到"封面图",上传或选择图片即可。封面图会显示在文章列表中。

Q12: 首字头像是什么?

:首字头像是主题的特色功能。当用户没有上传头像时,自动取用户名的第一个字,加上随机彩色背景生成头像。优点是无需联网、加载快、每用户颜色固定。

Q13: 如何修改导航菜单?

:导航菜单由Emlog后台管理。进入 外观 → 导航菜单,可以添加/删除/排序导航项。主题设置中的"自定义导航菜单项"可以添加额外的链接。

Q14: Sitemap生成后在哪里?

:在你的站点根目录下,访问 http://你的域名/sitemap.xml。可以在百度站长平台或Google Search Console中提交此地址。

Q15: 如何设置友情链接?

  1. 进入Emlog后台 → 链接添加链接
  2. 填写链接名称、URL、Logo等信息
  3. 在主题设置 → 页脚设置 → 友情链接位置中选择显示位置

Q16: 文章目录TOC不显示怎么办?

排查步骤

  1. 检查"文章目录TOC"开关是否打开
  2. 确认文章中有 h2 或 h3 标题
  3. 如果文章没有标题标签,目录不会生成
  4. 清除浏览器缓存

Q17: 如何关闭侧边栏?

操作:外观 → 主题设置 → 首页设置 → 显示侧边栏 → 关闭 → 保存

Q18: 如何设置视频背景?

操作

  1. 风格设置 → 背景类型 → 选择"视频背景"
  2. 背景视频URL → 输入视频文件地址
  3. 保存设置

注意:视频格式为MP4,文件不宜过大。

Q19: 配置导入失败怎么办?

排查步骤

  1. 确认导入的文件是本主题导出的JSON格式
  2. 确认文件没有损坏(用文本编辑器打开看看是否是JSON格式)
  3. 尝试重新导出一份配置,对比格式

Q20: 如何获得技术支持?

方式

  • 访问Emlog官网应用商店的主题页面留言
  • 在Emlog社区论坛发帖
  • 联系主题作者

十七、设置速查表

快速找到你需要的设置项:

我想... 设置路径
换主题风格 风格设置 → 主题风格
上传LOGO 风格设置 → LOGO图片
改主题色 风格设置 → 主题主色调
设置背景图 风格设置 → 背景类型+自定义背景图
开启Pjax 风格设置 → 启用Pjax无刷新
添加自定义CSS 风格设置 → 自定义CSS
设置首页布局 首页设置 → 首页布局
配置轮播图 首页设置 → 轮播图配置
设置Hero横幅 首页设置 → Hero横幅各项
关闭侧栏 首页设置 → 显示侧边栏
改分页方式 首页设置 → 分页模式
开启懒加载 图片设置 → 图片懒加载
开启灯箱 图片设置 → 灯箱效果
改缩略图大小 图片设置 → 缩略图宽度/高度
开启目录TOC 文章设置 → 文章目录TOC
开启代码高亮 文章设置 → 代码高亮
开启点赞 文章设置 → 启用点赞功能
开启分享 文章设置 → 启用分享功能
设置SEO标题 SEO设置 → 首页SEO标题
开启Sitemap SEO设置 → 自动生成Sitemap
添加广告 广告管理 → 开关+代码
设置侧栏广告 广告管理 → 侧栏广告1/2/3
填写备案号 页脚设置 → 备案号
设置友链位置 页脚设置 → 友情链接位置
备份设置 关于主题 → 导出配置
恢复设置 关于主题 → 导入配置

附录A:服务器环境要求

PHP配置建议

配置项 建议值 说明
memory_limit 128M+ 内存限制
post_max_size 64M+ POST数据最大值
upload_max_filesize 64M+ 上传文件最大值
max_execution_time 60+ 最大执行时间(秒)
max_input_vars 3000+ 最大输入变量数

伪静态规则

如果需要使用用户中心等功能,需要开启伪静态。

Nginx规则

location / {
    try_files $uri $uri/ /index.php?$query_string;
}

Apache规则(.htaccess):

RewriteEngine On
RewriteBase /
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ index.php/$1 [L]

附录B:广告代码示例

Google AdSense

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-你的ID"
     crossorigin="anonymous"></script>
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-你的ID"
     data-ad-slot="你的广告位ID"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

自定义图片广告

<a href="https://广告链接" target="_blank" rel="noopener">
  <img src="https://广告图片地址" alt="广告" style="width:100%;max-width:728px;height:auto;">
</a>

百度联盟广告

<script type="text/javascript">
    /*你的百度联盟代码*/
</script>

附录C:术语解释

术语 解释
Pjax 一种网页无刷新加载技术,结合了Ajax和pushState
TOC Table of Contents,目录,自动从文章标题生成
灯箱 Lightbox,点击图片全屏预览的效果
懒加载 Lazy Loading,图片滚动到可见区域才加载
SEO Search Engine Optimization,搜索引擎优化
Open Graph Facebook制定的网页元数据协议,用于社交分享
Sitemap 站点地图,列出网站所有页面URL的XML文件
robots.txt 告诉搜索引擎爬虫哪些页面可以抓取的文本文件
CDN Content Delivery Network,内容分发网络
Hero横幅 首页顶部的大型横幅区域
瀑布流 Masonry,一种不等高卡片的布局方式
Gravatar 全球通用头像服务,根据邮箱匹配头像
ICP备案 中国工信部的网站备案制度
Web Share API 浏览器原生的分享接口

本手册最后更新:2026-07-15
主题版本:v1.1.6
适用Emlog版本:Pro 2.6+

评论 (0)

发表评论

分类
资源分享 13知识教程 13人像写真 2线报信息 12设计灵感 3旅行日记 2