更改搜索框和评论框的默认字符
Bitcron 官方提供的 HTML 片段非常棒,它让模板制作变得轻松而高效。也正因如此,自定义程度低了不少,但我认为“瑕不掩瑜”,毕竟抠细节到这种程度的场合非常少。然而最近因为定制主题遇到了相关问题,本着客户至上的原则便积极寻找解决方法,还真被我找到了,干脆在此做个记录,为我一直不知如何开头的 Bitcron 模板笔记做个 Opening。
搜索框
2017.09.08更新:感谢 sci707 的有力补充,直接用 +posts.search_in_html(placeholder='搜索')
即可,亲测有效。
使用 +posts.search_in_html()
时,默认的预留字符是英文的 Search
。得到林小沐的帮助,使用以下 JavaScript 代码便可替换成任何想要的字符。比如替换为中文的 搜索
:
document.getElementById('search_posts_keywords').placeholder = '搜索';
还是来自林小沐的建议:因为 JavaScript 更改有一定的延迟,所以干脆不使用官方 HTML 片段而直接写出搜索框代码可能更直接更方便:
form(method='get', action='/', role='search')
input(type='search', name='s', placeholder='搜索')
评论框
使用 +post.comments_as_html()
添加官方评论框时,默认的字符全部都是英文的。可以像修改搜索框一样使用 JavaScript 代码替换信息输入框的预留字符,比如在改成中文的同时,使用 *
提示必填或选填:
document.getElementsByName('author')[0].placeholder = '名称*';
document.getElementsByName('email')[0].placeholder = '邮箱*';
document.getElementsByName('site')[0].placeholder = '网址';
或者使用 jQuery:
$(document).ready(function() {
$('input[placeholder="Name"]').attr('placeholder', '名称*')
$('input[placeholder="Email"]').attr('placeholder', '邮箱*')
$('input[placeholder="Website"]').attr('placeholder', '网址')
});
对于 JavaScript 和 jQuery 我并无偏好,因为反正都不会,但是在替换评论框其他字符上先找到了 jQuery 的方法,测试有效就用着了。以下是替换 Submit!
Comments
Write a Comment
reply
字符的 jQuery 代码:
$(document).ready(function() {
$('.comment_submit_button').val('提交评论');
$('.comments_block_title').html('<b>全部评论</b>');
$('.trigger_title').text('发表评论');
$('.reply').text('回复');
});
综上所述,如果把全部替换都包含进去,那么统一成 jQuery 会更方便一些:
script
$(document).ready(function() {
$('.comment_submit_button').val('提交评论');
$('.comments_block_title').html('<b>全部评论</b>');
$('.trigger_title').text('发表评论');
$('.reply').text('回复');
$('input[placeholder="Name"]').attr('placeholder', '名称*')
$('input[placeholder="Email"]').attr('placeholder', '邮箱*')
$('input[placeholder="Website"]').attr('placeholder', '网址')
$('#search_posts_keywords').attr('placeholder', '搜索')
});
好了,好久没写技术文,心情很激动,就这么完美地结束吧。