工单 #18 八条诉求逐条落地: 1. 月份、日期、年份全部倒序(最近的在最上面) - PHP 侧 `krsort($years[$y]['months'])`(原来是 ksort) - JS 侧 `Object.keys(...).sort((a,b)=>b-a)` —— 对象键序对纯数字整数键 会强制升序,服务端顺序传不过来,必须前端自己再排一次 - 年份本来就是 krsort,日期本来就是倒序,本次只补月份 2. 年份字体再大一点 - 原来 CSS 写的 22px **从来没有生效过**:`.yang-archives .ar-year` 是 (0,2,0),被 `.k-main .details .article .content h3` 的 (0,4,1) 压死, 线上实际是 18px - 改为带 `.k-main` 前缀(提到 (0,5,0))+ 26px + 700 - `.ar-month-title` 同一个坑,一并修(写 14px/600,线上实际 16px/500) 3. 「共 N 篇」太高、比年份还高 → 下移与年份底边对齐 - `.ar-head` 的 `align-items: center` → `flex-end` - `.ar-year` 的 margin 显式清零(kratos 的 `h1..h6 { margin: 0 0 30px 0 }`) - 窄屏媒体查询同步改,否则手机上又回到居中 - 注意 `flex-end` 对的是 margin box,所以 margin 不清零等于没改 4. 每月后面的裸数字 → 「共 N 篇」 - PHP:`sprintf(esc_html__('共 %s 篇'), number_format_i18n(...))` - JS:同一个文案键 `i18n.monthCount`,服务端输出到 `yangArchivesData` - 新增 `monthCount` 键,**没有复用** `totalFmt`(两处语义不同, 以后要分别改文案时不至于互相牵连) 5. 上一年/下一年按钮看不清 → 与「写下你的评论」同款观感 - 平时:`1px solid #cfe6fb` 浅蓝框 + 透明底 + `--yq-primary-dark` 蓝字 - 悬停:主色实底 + 白字(`.ar-nav-year` / `.ar-nav-arrow` 也要跟白, 否则图标还是蓝的在蓝底上看不见) - 禁用态保持灰(`is-disabled` + opacity .42),不能跟可用态一个样 6. 评论「评论者」下面的灰线太短 → 延长到与评论分隔线等长、右侧到头 - 🔴 这里改过一次方案:一开始以为把 h3 `flex: 1 1 auto` 撑宽就行, 实测发现 `.comments-head` 是 flex 行,右边还有「写下你的评论」按钮 (flex: 0 0 auto),h3 撑满也只能长到按钮左边缘 —— 原理上到不了右端 (实测 h3 110.5px / li 561.98px,差的 451px 就是按钮 + gap) - 最终方案:**线从 h3 搬到 `.comments-head` 容器上**, h3 显式 `border-bottom: none` 干掉 kratos 的 #f0f0f0, 否则会出现一短一长两条线,比原来更难看 - 容器那条规则**还必须带 `.k-main` 前缀**((0,5,0)),否则压不过 kratos 的 `.comments .title`。发布判据当场抓到这一条:注释里写了 「带 .k-main 前缀」,代码里漏了 —— 注释不能当证据 7. 工具条分隔细线不统一 → 5 个按钮 4 条线 - 原来 B/I 之间没有线,其余有 ⇒ 现在统一 - 写成「每条后面跟一条」会在末尾多出贴容器边缘的孤线,所以是 5 按钮 4 线 8. 清理无用 JS/CSS - 四轮查证结论:**没有可安全删除的**,代码一行未动 - 排查过程已作为评论发到工单 测试:归档单测 113/0(反向 13 真红)、归档 e2e 112/0(反向 24 真红)、 评论几何 157/0(反向含新增 5 条,覆盖"线搬回标题""两处都画"两种错误形态)。 线上真实页面几何探针发布前 17 通过/16 失败(每条都对应上面某一条诉求), 发布后要求全绿。
483 lines
25 KiB
PHP
483 lines
25 KiB
PHP
<?php
|
||
/**
|
||
* 评论模板
|
||
*
|
||
* ── 3.2.18 重写要点 ──────────────────────────────────────────
|
||
* 1. **列表容器改成 <ol>**。原来 `<div class="list">` 里直接放
|
||
* `wp_list_comments()` 输出的 `<li>`,标签层级非法。浏览器会
|
||
* 自行"修复"结构,而嵌套回复(`<ul class="children">`)在这种
|
||
* 被修复过的树里容易错位 —— 这是"评论看起来乱"的一个真实来源。
|
||
*
|
||
* 2. **回复状态条**。点「回复」时除了把表单挪过去,还在表单上方
|
||
* 显示「正在回复 @某人 / 取消」。旧实现只有表单被挪动这一条线索,
|
||
* 用户在长评论区里挪动后常常不知道自己到底在回复谁。
|
||
*
|
||
* 3. **表单加 nonce**。AJAX 提交走 nonce 校验,没有它任何第三方
|
||
* 页面都能借访客的浏览器刷评论。
|
||
*
|
||
* 4. **提交按钮的禁用态由 JS 控制**,模板里给出 `.is-loading` 的样式钩子。
|
||
*
|
||
* ── 3.2.19 修的两个结构问题 ──────────────────────────────────
|
||
* 5. **取数不再交给 `wp_list_comments()` 推导**。3.2.18 传了
|
||
* `page=1` / `per_page=10`,而核心那段"独立查询"分支在内层
|
||
* 条件不成立时**不会给 `$_comments` 赋值**(注释说会回退到
|
||
* `$wp_query->comments`,但代码里没有这个回退),结果
|
||
* `paged_walk(null, ...)` 输出空串 —— 评论一条都不显示。
|
||
* 现在由 `yang_comment_page()` 取好、当第二个参数传进去。
|
||
*
|
||
* 6. **子评论容器改成 `yang-children`**(见 `Yang_Walker_Comment`)。
|
||
* 核心 `start_lvl()` 固定输出 `class="children"`,而样式表里
|
||
* 几十条规则全按 `.yang-children` 写,类名对不上就全部失效。
|
||
*
|
||
* @author Yongquan Yang <yangyq.net>
|
||
* @license MIT License
|
||
*/
|
||
|
||
if (isset($_SERVER['SCRIPT_FILENAME']) && 'comments.php' == basename($_SERVER['SCRIPT_FILENAME'])) {
|
||
die();
|
||
}
|
||
|
||
/* ── 3.2.46 评论关闭时整块不输出 ──────────────────────────────
|
||
*
|
||
* 以前这里会渲染一个 `.comments` 容器,并在里面打一句
|
||
* 「评论已关闭。」/「评论已关闭,但你可以阅读上面的讨论。」
|
||
* —— 用户明确要求:**评论一关,这一块整个消失**,
|
||
* 不留提示文字、不留空容器、已有评论也不再显示。
|
||
* 正文结束之后直接就是页脚。
|
||
*
|
||
* 🔴 为什么是 `return` 而不是把内容包进 `if (comments_open())`:
|
||
* 包起来的话,容器 `<div class="comments">` 仍会被输出(一个空盒子),
|
||
* 而主题给 `.comments` 有 margin/padding,页面上会留下一道空白 ——
|
||
* 看起来像"有个东西没加载出来"。`return` 是**一个字节都不输出**,
|
||
* 这才是需求要的"什么都没有"。
|
||
*
|
||
* 🔴 必须放在**任何输出之前**:这个位置在文件里还没有 echo 过任何东西,
|
||
* 所以 return 是干净的。一旦挪到后面,前面的 HTML 已经发出去了,
|
||
* 再加 return 只会得到一个残疾的残块。
|
||
*
|
||
* ⚠️ `comments.php` 是被 `comments_template()` include 的,
|
||
* 在它里面 `return` 只会结束这个模板文件的执行,
|
||
* 不会中断 single.php / page.php 的后续渲染。
|
||
*/
|
||
if (!comments_open()) {
|
||
return;
|
||
}
|
||
|
||
require get_template_directory() . '/pages/page-smilies.php';
|
||
|
||
$yang_post_id = get_the_ID();
|
||
$yang_comment_count = (int) get_comments_number($yang_post_id);
|
||
$yang_max_depth = (int) get_option('thread_comments_depth', 5);
|
||
if ($yang_max_depth <= 0) {
|
||
$yang_max_depth = 5;
|
||
}
|
||
$yang_threaded = (bool) get_option('thread_comments');
|
||
$yang_has_comments = ($yang_comment_count > 0);
|
||
|
||
/* 评论是否分页:分页时首屏只给「加载更多」,不一次性铺全部 */
|
||
$yang_paged = (bool) get_option('page_comments');
|
||
$yang_per_page = (int) get_option('comments_per_page', 20);
|
||
if ($yang_per_page <= 0) {
|
||
$yang_per_page = 20;
|
||
}
|
||
?>
|
||
<div class="comments" id="comments">
|
||
|
||
<div class="comments-head">
|
||
<h3 class="title">
|
||
<?php
|
||
if ($yang_comment_count > 0) {
|
||
printf(
|
||
/* translators: %s: 评论条数 */
|
||
esc_html__('评论(%s)', 'kratos'),
|
||
esc_html(number_format_i18n($yang_comment_count))
|
||
);
|
||
} else {
|
||
esc_html_e('评论', 'kratos');
|
||
}
|
||
?>
|
||
</h3>
|
||
<?php
|
||
/* 3.2.46:原本是 `if (comments_open())`。文件开头已在评论关闭时
|
||
return,所以这里恒真,条件已去掉。留着它会让后来人以为
|
||
"还另有一个关评论的分支"。 */
|
||
?>
|
||
<a class="comments-jump-form" href="#respond"><?php esc_html_e('写下你的评论', 'kratos'); ?></a>
|
||
</div>
|
||
|
||
<?php
|
||
/* 3.2.46 起这里不再有「评论已关闭」提示分支:
|
||
文件开头已经 `if (!comments_open()) return;`,走不到这一行。
|
||
原先两句「评论已关闭。」「评论已关闭,但你可以阅读上面的讨论。」
|
||
是用户明确要求删掉的 —— 关评论就该整块消失。 */
|
||
?>
|
||
|
||
<?php if ($yang_has_comments) : ?>
|
||
<?php
|
||
/* <ol> 而不是 <div>:<li> 的父元素必须是列表容器。
|
||
加 reversed/start 会打乱视觉顺序,所以只用普通 <ol>。 */
|
||
?>
|
||
<ol class="yang-comment-list" id="yang-comment-list">
|
||
<?php
|
||
/* 取数自己来,不让 wp_list_comments 去推导分页。
|
||
原因见 inc/theme-comments.php 里 yang_comment_page() 的注释:
|
||
当它推导出的当前页与传入的 page 相等时,内部 $_comments
|
||
不会被赋值,列表直接是空的。显式传数组就绕开了那段逻辑。 */
|
||
$yang_page_comments = yang_comment_page(
|
||
$yang_post_id,
|
||
1,
|
||
$yang_paged ? $yang_per_page : 0
|
||
);
|
||
|
||
wp_list_comments(array(
|
||
'type' => 'comment',
|
||
'callback' => 'comment_callbacks',
|
||
'walker' => new Yang_Walker_Comment(),
|
||
'style' => 'ol',
|
||
'max_depth' => $yang_threaded ? $yang_max_depth : 1,
|
||
'avatar_size' => 48,
|
||
'per_page' => 0,
|
||
'page' => 0,
|
||
), $yang_page_comments);
|
||
?>
|
||
</ol>
|
||
|
||
<?php
|
||
/* 加载更多:只在「有分页」且「顶层评论数超过一页」时出现。
|
||
判据必须与 AJAX 的 has_more 同口径(都按顶层算),
|
||
否则会出现"按钮还在、点了却什么都没有"。
|
||
旧模板无条件输出,即使只有 1 条评论也显示一个点不动的按钮。 */
|
||
$yang_top_count = (int) get_comments(array(
|
||
'post_id' => $yang_post_id,
|
||
'status' => 'approve',
|
||
'parent' => 0,
|
||
'count' => true,
|
||
));
|
||
$yang_has_more = $yang_paged && $yang_top_count > $yang_per_page;
|
||
?>
|
||
<div class="comments-more" id="yang-comments-more"<?php echo $yang_has_more ? '' : ' hidden'; ?>>
|
||
<button type="button" class="comments-more-btn" data-page="2">
|
||
<?php esc_html_e('加载更多评论', 'kratos'); ?>
|
||
</button>
|
||
</div>
|
||
|
||
<?php
|
||
/* 3.2.46:这里原本是 `elseif (comments_open())`。文件开头已经
|
||
在评论关闭时 `return`,所以走到这里时 comments_open() **恒真** ——
|
||
保留那个条件只会变成一句永远为真的死判断,后来人读到这里会
|
||
以为"还有个关评论的分支要照顾"。改成 else。 */
|
||
?>
|
||
<?php else : ?>
|
||
|
||
<p class="comments-empty"><?php esc_html_e('还没有评论,来说第一句吧。', 'kratos'); ?></p>
|
||
|
||
<?php endif; ?>
|
||
|
||
<?php
|
||
/* 3.2.46:原本是 `if (comments_open())`,同上,恒真,已去掉条件。
|
||
下面的登录提示 / 评论表单因此只在"评论开放"时才走到这里 ——
|
||
这正是需求要的:关评论时整块不输出(而且文件开头就 return 了,
|
||
连外层 .comments 容器都不会有)。 */
|
||
?>
|
||
|
||
<?php if (get_option('comment_registration') && !is_user_logged_in()) : ?>
|
||
|
||
<div id="respond" class="comment-respond">
|
||
<p class="comments-login-required">
|
||
<?php
|
||
printf(
|
||
/* translators: %s: 登录链接 */
|
||
wp_kses(
|
||
__('您需要 <a href="%s">登录</a> 之后才可以评论。', 'kratos'),
|
||
array('a' => array('href' => array()))
|
||
),
|
||
esc_url(wp_login_url(get_permalink()))
|
||
);
|
||
?>
|
||
</p>
|
||
</div>
|
||
|
||
<?php else : ?>
|
||
|
||
<div id="respond" class="comment-respond mt-4">
|
||
<h3 class="comment-reply-title">
|
||
<span id="yang-reply-title-text"><?php esc_html_e('发表评论', 'kratos'); ?></span>
|
||
<?php
|
||
/* 取消回复按钮:由 JS 控制显示,模板里先藏起来。
|
||
不用 WordPress 的 cancel_comment_reply_link():
|
||
它生成的 <a href> 依赖 JS 拦截,没 JS 时会跳到
|
||
?replytocom= 的地址,行为很怪。这里用 button。 */
|
||
?>
|
||
<button type="button" id="yang-cancel-reply" class="comment-cancel-reply" hidden>
|
||
<?php esc_html_e('取消回复', 'kratos'); ?>
|
||
</button>
|
||
</h3>
|
||
|
||
<?php
|
||
/* 正在回复谁:JS 更新这段文字。
|
||
放在表单上方而不是按钮旁边,是因为表单会被"搬"到
|
||
被回复评论的下方,粘在按钮上的提示会跟着乱跑。 */
|
||
?>
|
||
<p class="comment-reply-hint" id="yang-reply-hint" hidden></p>
|
||
|
||
<form id="commentform" name="commentform" class="yang-comment-form" method="post"
|
||
action="<?php echo esc_url(site_url('/wp-comments-post.php')); ?>">
|
||
|
||
<?php if (!is_user_logged_in()) : ?>
|
||
<?php
|
||
/* 已登录用户的昵称邮箱从 cookie 里取,未登录才显示输入框。
|
||
esc_attr 必须做:cookie 里的值是用户可控的。 */
|
||
$yang_commenter = wp_get_current_commenter();
|
||
?>
|
||
<div class="comment-info">
|
||
<div class="comment-field comment-form-author">
|
||
<label for="author" class="sr-only"><?php esc_html_e('昵称', 'kratos'); ?></label>
|
||
<span class="comment-field-icon" aria-hidden="true"><i class="kicon i-user"></i></span>
|
||
<input class="comment-input" id="author" name="author" type="text"
|
||
placeholder="<?php esc_attr_e('昵称(必填)', 'kratos'); ?>"
|
||
value="<?php echo esc_attr($yang_commenter['comment_author']); ?>"
|
||
required="required" autocomplete="nickname" maxlength="60">
|
||
</div>
|
||
<div class="comment-field comment-form-email">
|
||
<label for="email" class="sr-only"><?php esc_html_e('邮箱', 'kratos'); ?></label>
|
||
<span class="comment-field-icon" aria-hidden="true"><i class="kicon i-cemail"></i></span>
|
||
<input class="comment-input" id="email" name="email" type="email"
|
||
placeholder="<?php esc_attr_e('邮箱(必填,不会公开)', 'kratos'); ?>"
|
||
value="<?php echo esc_attr($yang_commenter['comment_author_email']); ?>"
|
||
required="required" autocomplete="email" maxlength="120">
|
||
</div>
|
||
<div class="comment-field comment-form-url">
|
||
<label for="url" class="sr-only"><?php esc_html_e('网址', 'kratos'); ?></label>
|
||
<span class="comment-field-icon" aria-hidden="true"><i class="kicon i-url"></i></span>
|
||
<input class="comment-input" id="url" name="url" type="url"
|
||
placeholder="<?php esc_attr_e('网址(选填)', 'kratos'); ?>"
|
||
value="<?php echo esc_attr($yang_commenter['comment_author_url']); ?>"
|
||
autocomplete="url" maxlength="200">
|
||
</div>
|
||
</div>
|
||
<?php endif; ?>
|
||
|
||
<div class="comment-textarea">
|
||
<label for="comment" class="sr-only"><?php esc_html_e('评论内容', 'kratos'); ?></label>
|
||
|
||
<?php
|
||
/* ── 3.2.24 富文本工具条 ──────────────────────────────
|
||
* 在输入框上方一排小按钮:加粗 / 斜体 / 字体颜色 / 表情。
|
||
* 不是 contenteditable 富文本 —— 评论内容仍是纯文本存储,
|
||
* 工具条只是在光标处插入受控的少量 HTML 标签
|
||
* (<strong>/<em>/<span style="color:…">),后端由
|
||
* theme-comments.php 里的 kses 白名单放行这三种标签,
|
||
* style 属性由 WP 核心的 safecss_filter_attr 二次消毒,
|
||
* 只放行 color 这类安全属性。改动面最小、无 XSS 面。
|
||
*
|
||
* 表情按钮原来在底栏左侧,3.2.24 起并入
|
||
* 工具条;id(yang-smile-btn / yang-smile-panel)不变,
|
||
* comments.js 的面板开合逻辑不用改。
|
||
*/
|
||
?>
|
||
<div class="comment-toolbar" role="toolbar"
|
||
aria-label="<?php esc_attr_e('评论格式工具条', 'kratos'); ?>">
|
||
<?php
|
||
/* 🔴 3.2.48:分隔线规则统一为「**每个按钮之间一条**」。
|
||
*
|
||
* 原来 4 个工具按钮(加粗、斜体、颜色、表情、代码 里
|
||
* 加粗与斜体算一组)只有 3 条分隔线,位置是:
|
||
* [B][I] │ [A] │ [😊] │ [<>]
|
||
* 加粗和斜体挤在同一组、中间没线,于是用户看到
|
||
* 「有些中间有细线,有些没有」。
|
||
*
|
||
* 现在:**5 个按钮、4 条线,每两个相邻按钮之间一条,
|
||
* 首尾都不画**。
|
||
* [B] │ [I] │ [A] │ [😊] │ [<>]
|
||
* 判据在 _comments_geometry.js:sep 数量必须恒等于
|
||
* 「.comment-tool-btn 数量 - 1」,且每条 sep 左右两侧
|
||
* 都紧邻一个按钮(不是贴在容器边上)。
|
||
*
|
||
* ⚠️ 别把它写成"每个按钮后面跟一条":那样最后会多出
|
||
* 一条贴到容器右边缘的孤线,看起来像个掉队的竖线。
|
||
*/
|
||
?>
|
||
<button type="button" class="comment-tool-btn" id="yang-tool-bold"
|
||
title="<?php esc_attr_e('加粗', 'kratos'); ?>"
|
||
aria-label="<?php esc_attr_e('加粗', 'kratos'); ?>">
|
||
<span class="comment-tool-glyph comment-tool-glyph-bold" aria-hidden="true">B</span>
|
||
</button>
|
||
|
||
<span class="comment-toolbar-sep" aria-hidden="true"></span>
|
||
|
||
<button type="button" class="comment-tool-btn" id="yang-tool-italic"
|
||
title="<?php esc_attr_e('斜体', 'kratos'); ?>"
|
||
aria-label="<?php esc_attr_e('斜体', 'kratos'); ?>">
|
||
<span class="comment-tool-glyph comment-tool-glyph-italic" aria-hidden="true">I</span>
|
||
</button>
|
||
|
||
<span class="comment-toolbar-sep" aria-hidden="true"></span>
|
||
|
||
<div class="comment-tool-group">
|
||
<button type="button" class="comment-tool-btn comment-tool-color" id="yang-tool-color"
|
||
aria-expanded="false" aria-controls="yang-color-panel"
|
||
title="<?php esc_attr_e('字体颜色', 'kratos'); ?>"
|
||
aria-label="<?php esc_attr_e('字体颜色', 'kratos'); ?>">
|
||
<span class="comment-tool-glyph comment-tool-glyph-color" aria-hidden="true">A</span>
|
||
</button>
|
||
<div class="comment-color-panel" id="yang-color-panel" hidden>
|
||
<?php
|
||
/* 预设色板:常用 8 色。data-color 由 JS 读去包选区,
|
||
不用 <input type=color> —— 原生取色器弹窗体验割裂,
|
||
而且访客只是想快速标个重点色。 */
|
||
$yang_tool_colors = array(
|
||
'#000000' => '黑色',
|
||
'#7f8c8d' => '灰色',
|
||
'#e74c3c' => '红色',
|
||
'#e67e22' => '橙色',
|
||
'#f1c40f' => '黄色',
|
||
'#2ecc71' => '绿色',
|
||
'#00a2ff' => '蓝色',
|
||
'#9b59b6' => '紫色',
|
||
);
|
||
foreach ($yang_tool_colors as $yang_c => $yang_name) :
|
||
?>
|
||
<button type="button" class="comment-color-swatch"
|
||
data-color="<?php echo esc_attr($yang_c); ?>"
|
||
style="background-color: <?php echo esc_attr($yang_c); ?>;"
|
||
title="<?php echo esc_attr(sprintf(__('字体颜色:%s', 'kratos'), $yang_name)); ?>"
|
||
aria-label="<?php echo esc_attr(sprintf(__('字体颜色:%s', 'kratos'), $yang_name)); ?>"></button>
|
||
<?php endforeach; ?>
|
||
</div>
|
||
</div>
|
||
|
||
<span class="comment-toolbar-sep" aria-hidden="true"></span>
|
||
|
||
<div class="comment-tool-group comment-tool-group-smile">
|
||
<button type="button" class="comment-tool-btn comment-smile-btn" id="yang-smile-btn"
|
||
aria-expanded="false" aria-controls="yang-smile-panel"
|
||
title="<?php esc_attr_e('插入表情', 'kratos'); ?>"
|
||
aria-label="<?php esc_attr_e('插入表情', 'kratos'); ?>">
|
||
<i class="kicon i-face" aria-hidden="true"></i>
|
||
</button>
|
||
<div class="comment-smile-panel" id="yang-smile-panel" hidden>
|
||
<?php echo $smilies; ?>
|
||
</div>
|
||
</div>
|
||
|
||
<span class="comment-toolbar-sep" aria-hidden="true"></span>
|
||
|
||
<?php
|
||
/* ── 3.2.42 代码块按钮 ────────────────────────────
|
||
* 访客讨论文章正文里的代码时,往往需要贴一段代码回来。
|
||
* 在此之前这件事**根本做不到**(用真实 WP 7.1.3 实测):
|
||
* · `<pre>` 不在 kses 白名单里 → 整条被剥掉
|
||
* · `<code>` 在,但任何属性都会被剥,包括 class →
|
||
* 语言标记保不住
|
||
* · 没有 pre 兜着时 wpautop 会套 <p>,
|
||
* 而 <p> 的 white-space:normal 把行首缩进折叠掉
|
||
* · wptexturize 把 ' 变成弯引号、-- 变成破折号,
|
||
* make_clickable 把 URL 包成 <a> —— 代码直接跑不了
|
||
* 现在 pre 已进白名单,后两条会被 pre 自动挡住
|
||
* (实测 11 条判据全通过)。
|
||
*
|
||
* 语言必须让访客**自己选**:不选就没法可靠地上色,
|
||
* 而自动识别在站内实测只有 22% 准确率,不能替访客决定。
|
||
*/
|
||
$yang_hl_choices = function_exists('yang_hl_themes') ? array(
|
||
'text' => __('纯文本', 'kratos'),
|
||
'bash' => 'Bash',
|
||
'shell' => 'Shell',
|
||
'python' => 'Python',
|
||
'java' => 'Java',
|
||
'javascript' => 'JavaScript',
|
||
'typescript' => 'TypeScript',
|
||
'php' => 'PHP',
|
||
'c' => 'C',
|
||
'cpp' => 'C++',
|
||
'csharp' => 'C#',
|
||
'go' => 'Go',
|
||
'rust' => 'Rust',
|
||
'ruby' => 'Ruby',
|
||
'kotlin' => 'Kotlin',
|
||
'swift' => 'Swift',
|
||
'sql' => 'SQL',
|
||
'json' => 'JSON',
|
||
'yaml' => 'YAML',
|
||
'xml' => 'HTML/XML',
|
||
'css' => 'CSS',
|
||
'diff' => 'Diff',
|
||
'markdown' => 'Markdown',
|
||
'makefile' => 'Makefile',
|
||
'powershell' => 'PowerShell',
|
||
'dos' => 'Batch',
|
||
'ini' => 'INI',
|
||
'dockerfile' => 'Dockerfile',
|
||
'nginx' => 'Nginx',
|
||
) : array('text' => __('纯文本', 'kratos'));
|
||
?>
|
||
<div class="comment-tool-group comment-tool-group-code">
|
||
<button type="button" class="comment-tool-btn comment-code-btn" id="yang-code-btn"
|
||
aria-expanded="false" aria-controls="yang-code-panel"
|
||
title="<?php esc_attr_e('插入代码', 'kratos'); ?>"
|
||
aria-label="<?php esc_attr_e('插入代码', 'kratos'); ?>">
|
||
<span class="comment-tool-glyph comment-tool-glyph-code" aria-hidden="true"></></span>
|
||
</button>
|
||
<div class="comment-code-panel" id="yang-code-panel" hidden>
|
||
<div class="comment-code-panel-title"><?php esc_html_e('选择代码语言', 'kratos'); ?></div>
|
||
<div class="comment-code-langs">
|
||
<?php foreach ($yang_hl_choices as $yang_v => $yang_n) : ?>
|
||
<button type="button" class="comment-code-lang"
|
||
data-lang="<?php echo esc_attr($yang_v); ?>"><?php echo esc_html($yang_n); ?></button>
|
||
<?php endforeach; ?>
|
||
</div>
|
||
<div class="comment-code-panel-foot">
|
||
<?php esc_html_e('选好后在光标处插入代码块,把示例文字换成你的代码即可。', 'kratos'); ?>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<textarea class="comment-input" id="comment" name="comment" rows="6"
|
||
hidden aria-hidden="true" tabindex="-1"></textarea>
|
||
|
||
<?php /* 3.2.25 所见即所得编辑区:格式/表情所见即所得,
|
||
不再往框里插 <strong> 这类源码。真实内容提交前由
|
||
comments.js 序列化进上面隐藏的 #comment。
|
||
required 不能放隐藏 textarea 上(display:none 的
|
||
控件无法聚焦,原生校验会报错),空值检查在 JS 做。 */ ?>
|
||
<div class="comment-editor" id="yang-editor" contenteditable="true"
|
||
role="textbox" aria-multiline="true"
|
||
aria-label="<?php esc_attr_e('评论内容', 'kratos'); ?>"
|
||
data-placeholder="<?php esc_attr_e('说点什么…(加粗、颜色、表情点上方按钮)', 'kratos'); ?>"></div>
|
||
|
||
<div class="comment-bar">
|
||
<div class="comment-bar-right">
|
||
<span class="comment-status" id="yang-comment-status" role="status" aria-live="polite"></span>
|
||
<button type="submit" id="submit" class="comment-submit">
|
||
<?php esc_html_e('提交评论', 'kratos'); ?>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<?php
|
||
/* honeypot:把这个字段留空的是人,填了的是机器人。
|
||
CSS 用 position:absolute 移出视口,不能用 display:none
|
||
—— 部分爬虫会跳过隐藏字段,但多数不会跳过"移出视口"的。 */
|
||
?>
|
||
<p class="comment-hp" aria-hidden="true">
|
||
<label for="yang_hp"><?php esc_html_e('请勿填写此项', 'kratos'); ?></label>
|
||
<input type="text" id="yang_hp" name="yang_hp" value="" tabindex="-1" autocomplete="off">
|
||
</p>
|
||
|
||
<?php
|
||
wp_nonce_field('yang_comment_submit', 'yang_comment_nonce');
|
||
comment_id_fields();
|
||
do_action('comment_form', $yang_post_id);
|
||
?>
|
||
</form>
|
||
</div>
|
||
|
||
<?php endif; ?>
|
||
|
||
<?php /* 3.2.46:原来这里还有一个 `endif;` 关掉外层的
|
||
`if (comments_open())`。那个条件已删除,所以这里也少了对应的
|
||
endif —— 多的那个会导致 "syntax error"。 */ ?>
|
||
|
||
</div>
|