logo of Shuibaco

更改搜索框和评论框的默认字符

2017. / 651字 / 951阅 / 0评

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', '搜索')
    });

好了,好久没写技术文,心情很激动,就这么完美地结束吧。

1,010°
以梦为马
Comments
Write a Comment
点击加载Disqus