评论系统

主题内置Typecho原生评论系统，同样支持任何第三方评论服务（如：多说，disqus，畅言等）。

使用原生评论系统

你可以通过后台外观设置中这些开关来加强原生评论系统：

• 「评论系统——原生评论框的背景图片」设置评论框的背景图片。
• 「评论系统——默认评论者头像」设置默认的gravatar头像。
• 「主题增强功能——启用ajax评论」获取无刷新评论体验。

Q：如何更好的防止垃圾评论？

A：推荐SmartSpam

使用畅言

在后台外观设置——评论设置 选择 畅言，填写畅言appid和填写畅言conf参数。

使用其他第三方评论系统

在后台外观设置——评论设置 选择 其他第三方评论系统。

找到主题目录下的usr/third_party_comments.php，增加第三方评论系统的代码。（不推荐，第三方评论不仅不稳定，而且不一定与主题的pjax兼容，如果不兼容，请在后台外观设置中关闭pjax！）

关闭评论

适用于部分特殊情况需要关闭。

只需要修改主题目录下面的usr/OwO.json文件

修改表情

主题内置三个栏目颜文字和阿鲁和推特

直接在原有的代码上面做一些修改即可，比如图片替换，文字替换等。（具体代码含义见下面 ）

增加新的表情栏目

"新的表情栏目名称": {
    "name": "表情包文件夹名称",//只有图片表情类型才需要加这一项
    "type": "emoticon/emoji/image",
    "container": [
        {
            "icon": "OωO",
            "text": "Author: DIYgod"
        },
        {
            "icon": "OωO",
            "text": "Author: DIYgod"
        },
    ]
}

评论表情图片存储在主题目录下的assets/img/emotion

表情名称name：

• 该项只有当表情类型为图片表情时候才需要添加
• name的值对应了emotion文件夹下的表情包文件夹名称。如值为aru，文件夹名称对应为aru。
• 建议填写英文

表情类别type有三种:

• emoticon: 颜文字
• emoji: emoji表情（比如😊😜😒这些图标，typecho的数据库类型默认不支持emoji编码）
• image: 图片表情，只支持.png 后缀的图片

container下存储的是表情的具体内容：

• icon：表示的表情具体内容：
  • 颜文字就填具体的颜文字
  • emoji表情就填具体的emoji图标
  • 图片表情填写对应图片的文件名，如angry.png，填angry
• text:指的是鼠标悬停在表情上面显示的提示文字，一般为中文提示

相关问题

• 自定义添加的评论表情无法解析

如果表情的静态资源存在你自己的外部CDN，并且配置了「静态资源加速」，但是此时本地服务器也需要存储一份，因为需要检查对应的图片文件是否存在来决定是否解析表情。

在外观设置界面——Pjax栏目下的自定义pjax动画的HTML结构和自定义pjax动画的CSS代码 可以不用修改代码使用自己的动画。

如果需要不仅仅是切换页面的时候，在打开博客首屏也加载动画可以参考开发者高级设置 中的first_screen_animate 的配置。

下面是自定义动画的一个举例：

该例子的 css 和 html 来自 js+css3加载动画特效代码

自定义pjax动画的HTML结构

html 结构外层要被 id 为 loading的容器包裹，外层增加 loading 的 class。内部的class 增加 preloader-inner 的 class

---

注意下面代码，第一行和最后一行是外层包裹了一个容器。

第二行中的 class 需要增加preloader-inner

<div id="loading" class="loading">
<div class="loader loaded preloader-inner">
  <div class="ball a"></div>
  <div class="ball b"></div>
  <div class="meter">
    <div class="fill" style="height: 100%;"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
        <path fill="currentColor" d="M0,128L34.3,138.7C68.6,149,137,171,206,176C274.3,181,343,171,411,154.7C480,139,549,117,617,144C685.7,171,754,245,823,234.7C891.4,224,960,128,1029,106.7C1097.1,85,1166,139,1234,165.3C1302.9,192,1371,192,1406,192L1440,192L1440,320L1405.7,320C1371.4,320,1303,320,1234,320C1165.7,320,1097,320,1029,320C960,320,891,320,823,320C754.3,320,686,320,617,320C548.6,320,480,320,411,320C342.9,320,274,320,206,320C137.1,320,69,320,34,320L0,320Z"></path>
      </svg></div>
    <span class="fill-text">Loading</span>
  </div>
</div>
</div>

自定义 pjax 动画的 css 代码

.loader {
  font-size: 25vmin;
  width: 1em;
  height: 1em;
  background-color: #21346e;
  border-radius: 1em;
  position: relative;
}
.loader::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: 0.1rem solid #21346e;
  border-radius: inherit;
}
.loader.loaded::after {
  opacity: 0;
  border-color: #3d7af5;
  transform: scale(1.6);
  transition: opacity 0.6s ease, transform 0.6s ease-out;
}
.loader .meter {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  overflow: hidden;
}
.loader .meter .fill {
  background-color: #3d7af5;
  width: 100%;
  height: 0%;
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 10;
  transform: translateY(1.5vh);
  filter: drop-shadow(0 0 1rem black);
  transition: height 0.2s linear;
}
.loader .meter .fill svg {
  color: #3d7af5;
  position: absolute;
  transform: translateY(calc(-100% + 1px));
  width: 200%;
  animation: waves 4s ease-in-out infinite alternate;
}
@keyframes waves {
  0% {
    left: -10%;
    top: 2vh;
  }
  50% {
    top: 0vh;
  }
  100% {
    left: -60%;
    top: 1vh;
  }
}
.loader .meter .fill-text {
  position: absolute;
  z-index: 15;
  top: 50%;
  left: 50%;
  font-size: 1rem;
  transform: translate(-50%, -50%);
  color: rgba(15, 5, 20, 0.9);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 900;
  pointer-events: none;
}
.loader .ball {
  position: absolute;
  background-color: #21346e;
  top: 50%;
  left: 0;
  border-radius: inherit;
}
.loader .ball.a {
  width: 0.25em;
  height: 0.25em;
  transform-origin: 1.5em;
  animation: rotate-a 4s linear infinite;
}
.loader .ball.b {
  width: 0.3em;
  height: 0.3em;
  transform-origin: 1em;
  animation: rotate-b 7s linear reverse infinite;
}
@keyframes rotate-a {
  from {
    transform: translate(-1em, -50%) rotate(0deg);
  }
  to {
    transform: translate(-1em, -50%) rotate(360deg);
  }
}
@keyframes rotate-b {
  from {
    transform: translate(-0.5em, -50%) rotate(0deg);
  }
  to {
    transform: translate(-0.5em, -50%) rotate(360deg);
  }
}
.reload-button {
  position: absolute;
  bottom: 1rem;
  left: 1rem;
  border: 0;
  background-color: #21346e;
  font-family: monospace;
  color: rgba(15, 5, 20, 0.9);
  border-radius: 8px;
  padding: 1rem 2rem;
  box-shadow: 0 0 1rem 0.25rem rgba(0, 0, 0, 0.5);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  outline: none;
  font-weight: 900;
}
.reload-button:hover {
  background-color: #3d7af5;
  cursor: pointer;
  box-shadow: 0 0 0.5rem 0.125rem rgba(0, 0, 0, 0.5);
}
.reload-button:active {
  transform: translateY(0.5em);
}

.signature {
  position: absolute;
  bottom: 1rem;
  right: 1rem;
}
.signature a {
  display: flex;
  align-items: center;
  text-decoration: none;
  color: #ffffff;
  font-family: monospace;
}
.signature img {
  height: 2rem;
  width: 2rem;
  margin-left: 1em;
  border-radius: 2rem;
}

在这里，将主题的一些不常用，但是有的用户却可能使用到的配置放在这里：

{
  "show_post_last_date":false,
  "alt_show":false,
  "calendar_github":"ihewro",
  "rank_num":20
}

每行一个，按照上面的格式可以添加新的配置，注意最后一行的后面不要有英文逗号

key对应的值的类型有三种：

• true 或者 false
• 数字
• 字符串

只有字符串需要用英文双引号"" 括起来，数字或者true/false 不需要

现在支持的配置有：

与文章相关

show_post_last_date 文章最后更新日期

默认为true, false则文章页面不显示最后更新日期

alt_show 文章页面的alt标签

默认为true, false 不显示文章页面的图片的a l t标签

loading_img 图片懒加载的占位图

如果开启了图片懒加载功能，此处可以配置图片加载中的图片地址（建议是透明背景的 svg 图片）

post_speech 文章朗读

默认为true,值为false 表示不开启文章朗读功能

no_link_ico 外链跳转图标

默认为false，表示显示图标，值为true表示外链不自动添加「跳转」图标

off_star_post 文章点赞开关

默认为false，表示文章页面开启点赞，true表示关闭

off_star_page 独立页面点赞开关

默认为false，表示独立页面开启点赞，true表示关闭

off_star_comment 独立页面点赞开关

默认为false，表示当前页面的评论开启点赞，true表示关闭

off_read_mode 阅读模式关闭

默认为 false，表示文章页面开启阅读模式，true 表示关闭

与主题功能相关

left_location: 左侧边栏内容自动定位选中

默认true，当你进入你的博客某个内容页面（比如文章/页面/分类），会自动在左侧边栏中跟随选中（置顶导航和折叠导航下暂不支持） 设置false，则关闭该特性。

rank_num: 留言板的排行榜显示的最多人数数目

默认50 数字类型 "rank_num":20 修改为20

time_first_letter

默认为true，false则时光机页面的首文字不会放大

setting_only_day_mode:

默认为false，值为true表示当启动了设右侧边栏设置按钮，仅仅显示夜间模式的设置功能。

show_static 统计图表显示开关

默认为true，值为false 表示不显示图表统计

calendar_github 统计日历中显示GitHub数据

默认为空，表示不显示GitHub数据，值为GitHub的用户名则同时显示对应GitHub的提交记录。举例："calendar_github":"ihewro"

global_player_lyric 全局播放器歌词显示

默认为true，表示打开首页就直接显示全局音乐播放器的歌词，false表示不显示

auto_global_player_lyric, 全局播放器自动显示歌词

默认为true，表示在播放音乐的时候才会显示歌词，暂停音乐的时候自动隐藏，false表示不会根据音乐播放状态显示/隐藏歌词。

comment_random_name 评论昵称随机骰子🎲开关

默认为 true，表示评论区域的”昵称“区域有随机填写昵称的按钮，false 表示关闭该按钮

lock_hide_title 加密文章显示标题开关

默认为 false，加密分类的文章默认显示文章标题，可以通过设置为 true 来隐藏标题。（注意：首页右侧的热门文章暂不会隐藏标题）

music_api主题播放器音乐 API 地址

除非你希望使用第三方、外部提供的音乐 API 地址，否则你不需要配置该项，默认是你的博客地址/action/handsome-meting-api?server=:server&type=:type&id=:id&auth=:auth&r=:r

close_left_resize 关闭左侧边栏拖拽开关

默认为false，true表示关闭左侧边栏拖拽开关，即使设置为false，左侧边栏开关仍然会在以下情况下关闭：

• 页面宽度小于760px
• 透明模式
• 取消了固定导航
• 开启了置顶导航
• 开启了折叠导航

close_right_resize 关闭右侧边栏拖拽开关

默认为false，true表示关闭右侧边栏拖拽开关，即使设置为false，右侧边栏仍然会在页面尺寸小于984px的时候自动关闭。

video_external_api 自定义vplayer 云解析视频接口地址

默认为https://okjx.cc/?url=

only_login_comment 仅允许登录用户评论

默认为false，true表示禁止非登录用户评论文章

与主题样式相关

no_index_post_auto_array 关闭首页文章自动并列

默认false，即首页的文章根据当前屏幕的宽度决定是否并列显示（只有图片样式/小头图/无需头图的文章会参与自动排列，大头图样式独占一行，不会参与并列）

true，表示禁止这种特性，任何时候，一行只显示一篇文章

small-dock: 小样式的置顶导航

默认为true，当在开启了「置顶导航」时，顶部导航栏图标和文字排列成一行，更紧凑一些。值为false，表示置顶导航中，文字和图标是两行

blur_opacity 炫酷透明磨砂

默认为true，表示当你在外观设置开启「炫酷透明模式」会在部分位置增加磨砂效果，此效果对显示器差的设备会带来滑动掉帧的问题。false表示关闭。注意仅当开启「炫酷透明模式」，该项设置才有效果。(在版本较低的浏览器中该项始终不生效)

index-title-show 首页导航栏下标题

默认为true，表示显示首页导航栏下的“标题”，false表示不显示

index-desc-show 首页导航栏下的介绍

默认为true，表示显示首页导航栏下的介绍，false表示不显示

first_screen_animate 首次打开网页动画

默认为 false，表示首次打开网页不显示加载动画，true 表示加载动画。

p_indent 文章段落缩进

默认为 false，表示文章的段落不缩进，true 表示文章的每一个段落的开头都会缩进两个字符

自定义代码高亮文件名称

• light_codeStyle 自定义浅色模式下代码高亮文件名称
• dark_codeStyle 自定义深色模式下代码高亮文件名称

在外观设置界面的浅色/深色模式下的代码高亮风格选择 下可以在部分文件中选择样式，如果你想要的样式不在该列表中可以手动填写该字段，同时确保该样式文件存在（一般不需要设置请忽略）

主题内置了多语言包，默认选择根据浏览器自动选择语言，后台外观设置可以手动修改语言。

多语言分为两部分：

• 主题默认集成多语言文件（在主题的根目录的lang文件夹下）
• 用户自定义语言文件（在主题的根目录usr/lang文件夹下）

用户自定义语言文件优先级最高，请勿修改默认翻译文件（lang/目录下面的语言文件），只要修改usr/lang下的语言文件即可。

通过修改相应的语言文件，可以更改主题里面**任何词组**和**时间格式**。在本文最后会举几个例子方便大家自行修改。

语言显示规则

• Auto ：自动根据用户浏览器的语言设置显示相应的语言文件。
• 简体中文 ：显示顺序依次是：usr/lang/zh_CN.php —> lang/zh_CN.php，其他的语言文件（如zh_TW.php）则不会生效。其他语言设置同理。

修改主题默认翻译

以语言设置中选择了使用简体中文为例

比如：文章页面的「浏览次数」默认显示为「200次浏览」，希望改成「200次小伙伴来过」

在usr/lang/zh_CN.php修改如下：

/**
* @return array 返回包含翻译文本的数组
*/
    public function translated() {
        return array(
            '次浏览' => '次小伙伴来过'
            //添加翻译的词汇,每两组之间，用英文逗号隔开
        );
    }

注意，语言文件的翻译，是针对**已存在的词组**进行重新翻译，**而不是对任意汉字或不存在的词组翻译**。打开`lang/zh_TW.php` 可以看到所有可以翻译的词组。（目前所有翻译词组没有分类，有些凌乱，v4.0.0会进行整理）

再比如：文章顶部的「最后修改时间的时间格式」，默认为：「Y 年 m 月 d 日 h : i A」，想要修改为24进制时间

在相应的语言文件的翻译函数里面增加：

'Y 年 m 月 d 日 h : i  A' => 'Y 年 m 月 d 日 G : i "

修改其他语言同上所述，是完全一样的。

增加自定义语言文件

主题默认集成了中文简体、中文繁体、英语三种语言设置。

首先需要了解多语言文件的命名规则：

多语言文件名称 = Locale Code + .php。如 zh_CN.php和en.php

一些常见语言的Local Code：

zh_CN: 中文简体
zh_HK: 中文繁体，港澳
zh_TW: 中文繁体，台湾
en   : 英语
en_US: 英语，美式
en_CA: 英语，加拿大
en_AU: 英语，澳洲
ja   : 日语
ko   : 韩语

如果你想再增加一份新的语言文件，比如 日语

首先在usr/lang目录下创建语言文件：ja.php

文件初始化内容如下：

<?php
if (!defined('__TYPECHO_ROOT_DIR__')) exit;

/**
 * ja.php
 * Author     : Your name
 * Date       :
 * Version    :
 * Description:
 */
class Usr_Lang_ja extends Lang {

    /**
     * @return string 返回语言名称
     */
    public function name() {
        return "日语";
    }


    /**
     * @return array 返回包含翻译文本的数组
     */
    public function translated() {
        return array(
            '首页' => '家',
            '分类' => '分類'
        );
    }

    public function dateFormat() {
        return "月のM Y D日";
    }

}

在文件中的translated函数里面，按照格式填写翻译内容即可。

最后在后台语言设置中选择日语即可。

自己创建的语言文件中，需要对所有的**已存在的词组进行翻译**，否则将默认返回简体中文默认的词组。这项工作量要远远大于修改主题默认翻译。

主题支持单栏、双栏、三栏。

主题布局非常丰富，通过后台的外观设置，轻松搭配不一样的博客风格。

布局

单栏——极简模式

• 外观设置——置顶导航 开启（最侧边栏置顶）
• 外观设界面——页面元素显示设置——右侧边栏元素控制——不显示整体（不显示右侧边栏）

双栏模式

上面的两个操作执行一个即可

三栏模式

默认，显示更多的信息

配色

选择

在外观设置——主题色调选择，可以看到主题默认内置了14种配色。

如默认的dark-white-dark分别代表：「左侧边栏和上导航栏的交集部分（logo位置）」、「上导航栏」、「侧导航栏」。

如果要选择上面的配色，确保「主题色调自定义搭配」配置项是清空的！！！

自定义

主题色调自定义搭配

已有的颜色（后续考虑提供更多的配色）:

• black纯黑色
• white白色
• info蓝色
• success绿色
• danger深红色
• dark深色
• light灰白色
• primary紫色

其中dker 表示当前颜色增强

搭配样例：

全白配色即填写：

white-white-white 

其他配色举例：

white-white-white 
white dker-white-white
dark-light-light

分别代表：「左侧边栏和上导航栏的交集部分（logo位置）」、「上导航栏」、「侧导航栏」的颜色。

因为官方的vditor 文档更面向开发者，这里写一份关于vditor的面相用户的使用文档，大家可以感受到vditor的强大方便之处。同时vditor 仍然是一个正在发展的活跃项目，相信是会迭代的越来越好用的。

这里有我的博客关于vditor支持的语法一份演示，可以点击查看vditor官网演示效果

vditor后台编辑器 有什么亮点

• 首先typecho 本身的markdown解析器非常简陋，1.0版本不支持表格，最新版本也不支持todo 之类的语法，而vditor 就很好的弥补了这个问题，几乎支持了所有的markdown语法，如脑图、mathjax
• 而且在Handsome插件的配合下，支持复制上传图片、拖拽上传图片、复制的文字中包含外链支持自动上传到服务器上并替换地址（需要在Handsome插件设置里面开启）
• 如果Handsome插件里面启用了vditor.js 解析，前端的解析也可以获得与后台一致的解析。
• vditor还提供很多有用方便的功能，比如直接输入常用的视频网站的地址，就可以直接解析成视频播放，比如朗读功能
• vditor的外部功能的加载是文章中有使用才会动态加载，所以如果简单的文本，加载的外部js也很少
• 丰富的快捷键非常适合在线编辑，对表格的可视化编辑都是很好的特性

此外，vditor作为一个非常活跃的发展中开源项目，虽然还有一些小问题，如果你喜欢，可以在Handsome插件里面选择vditor编辑器，如果不喜欢也没关系，Handsome插件可以继续使用typecho自带的编辑器或者其他的编辑器。（typecho 1.2 开发版本的编辑器支持复制上传图片了）

个人比较喜欢vditor编辑器。

vditor.js 前台解析 有什么特点

能够和后台编辑器显示效果完全一致，而且支持解析更多的markdown语法，

比如todo（type cho自带解析器也可以通过安装第三方的markdown解析插件来实现）、脑图、文章直接粘贴第三方视频网站的（如bilibili）地址就能直接解析出视频，朗读，代码高亮支持复制。

这些功能如果对于你来说可有可无，那推荐使用type cho原生的方式解析，速度更快一些。

如果对markdown解析不要求特别复杂的功能（比如脑图之类），前台解析可以使用type cho自带的解析器 就能满足（主题自带了mathjax和代码高亮），而且对其他插件兼容性更好。后台的编辑器则可以根据个人需要进行选择，选择vditor编辑器或者type cho自带的编辑器。

个人比较喜欢原生解析器，因为我用的语法比较少，todo 语法也很少用

这里是我的博客中使用vditor.js 前台解析的示例问题： https://www.ihewro.com/archives/1115/