普通视图

回邮美学:“会说话的界面”

2025年11月30日 20:58

为什么开始留意“回复邮箱界面”?其实没什么宏大理由,就是2024年7月11日,我在整理收件箱的时候,突然意识到,我收到的每一封认真写的回复,都带着一种温度。

如我们评论一样,结尾附了一个小表情,莫名就轻松了起来,这些细节它其实是个人表达的一部分。尤其在互访互评、合作沟通越来越频繁的现在,一封看起来舒服的回复,真的会让对方更愿意继续对话,甚至记得你。

所以,我开始留意那些“会说话”的界面设计、模板、小功能。不是为了炫技,而是让每次已读,都不冷冰冰。

下面是我目前互访互评中的一些 “会说话的界面”,没有排名,不分先后,有些是官方功能,有些是自己改的,有些可能小众,但对我刚刚好,或许能从中找到属于你的那一款。

雅余 https://yayu.net

张洪Heo https://blog.zhheo.com
张洪

李的日志 https://lilog.cn

ACEVS https://acevs.com

威言威语 https://www.weisay.com

木木木木木 https://immmmm.com 林木木

牧羊人 https://www.shephe.com 牧羊人

湘铭`Blog https://xiangming.site 湘铭

粽叶加米 https://wordpace.com 粽叶加米

荒野菲克 https://ficor.net 菲克

漫漫长路 https://mmcl.net 漫漫长路

崔话记 https://cuixiping.com 崔话记

小十 https://www.xiaoten.com 小十

云心怀鹤 (我的主题是纸质信封) 云心怀鹤

最后,如果你也有一个非它不可的回复界面、模板、签名、小习惯,哪怕只是一个自动追加的喝口水再聊。

欢迎留言告诉我,我会访问你的网站并留言,选一些收录进这篇文章,标注你的名字或昵称(可匿名)。不为评比,只为互相种草,一起把回邮件这件小事,做得更贴心一点。

回邮美学:“会说话的界面”

2025年11月30日 20:58

为什么开始留意“回复邮箱界面”?其实没什么宏大理由,就是2024年7月11日,我在整理收件箱的时候,突然意识到,我收到的每一封认真写的回复,都带着一种温度。

如我们评论一样,结尾附了一个小表情,莫名就轻松了起来,这些细节它其实是个人表达的一部分。尤其在互访互评、合作沟通越来越频繁的现在,一封看起来舒服的回复,真的会让对方更愿意继续对话,甚至记得你。

所以,我开始留意那些“会说话”的界面设计、模板、小功能。不是为了炫技,而是让每次已读,都不冷冰冰。

下面是我目前互访互评中的一些 “会说话的界面”,没有排名,不分先后,有些是官方功能,有些是自己改的,有些可能小众,但对我刚刚好,或许能从中找到属于你的那一款。

雅余 https://yayu.net
2

张洪Heo https://blog.zhheo.com
张洪Heo

李的日志 https://lilog.cn
PixPin_2025-11-30_21-13-42

ACEVS https://acevs.com
3

威言威语 https://www.weisay.com
5

木木木木木 https://immmmm.com
林木木

牧羊人 https://www.shephe.com
牧羊人

湘铭`Blog https://xiangming.site
湘铭

粽叶加米 https://wordpace.com
粽叶加米

荒野菲克 https://ficor.net
菲克_2025-12-02_2

漫漫长路 https://mmcl.net
漫漫长路

崔话记 https://cuixiping.com
崔话记20251207

小十 https://www.xiaoten.com
小十

云心怀鹤 (我的主题是纸质信封)
云心怀鹤_2025-11-30

最后,如果你也有一个非它不可的回复界面、模板、签名、小习惯,哪怕只是一个自动追加的喝口水再聊。

欢迎留言告诉我,我会访问你的网站并留言,选一些收录进这篇文章,标注你的名字或昵称(可匿名)。不为评比,只为互相种草,一起把回邮件这件小事,做得更贴心一点。

Snapic Just 640px 主题入门

2025年10月9日 21:18

Snapic Just 640px是我在用的主题,作者更新很快,但一些修改只能在文件修,所以来总结一下我全部的设置。

Lopwon:不推荐从外部引入字体,访问不顺畅会导致自己的页面加载受阻,如果非得使用,需要放置在主题本身的 css 文件之下,也就是在 head 标签内的最下方,以覆盖主题 css 中的字体设置。

1、我是直接在head.php的< head >部分填写以下代码:

  <link rel="stylesheet" href="https://registry.npmmirror.com/lxgw-wenkai-screen-web/1.321.0/files/style.css" media="print" onload="this.media='all'"/>
  <style>
    body {
      font-family: "LXGW WenKai Screen", "微软雅黑", "Microsoft YaHei", "Georgia", "STZhongsong", serif;
      font-weight: normal;
    }
  </style>

宽度我设置的是640、800、960,可以自定义。

Lopwon:如果指定是代码位置的话,在 functions.php 文件:找到变量 $optionsPannelWidth 每行 label 对应一项宽度设置,可以新增也可以删除,value 为对应的宽度值,在前端点选后会把值传递到 html 的样式中的容器宽度变量 --body-width 来定义页面内容的宽度。

2、找到functions.php的$optionsPannelWidt:

        $optionsPannelWidth = '
            <div class="width">
                <label><input type="radio" name="width" value="640px"><span>窄栏</span></label>
                <label><input type="radio" name="width" value="800px"><span>适中</span></label>
                <label><input type="radio" name="width" value="960px"><span>宽栏</span></label>
                <label><input type="radio" name="width" value="default"><span>默认</span></label>
            </div>
        ';

同时在 functions.php 文件 找到变量 $width 修改相应的宽度设置。

    $width = new Typecho_Widget_Helper_Form_Element_Radio(
        'width',
        [
            '640px'     => _t('640px'),
            '800px'     => _t('800px'),
            '960px' => _t('960px')
        ],

右侧设置选择自己喜欢的阅览界面大小

3、下面是副标题的自定义设置,作者:@老街里,在 functions.php文件,我插入在变量 $catalog 结尾后,最新主题v1.6.0,第83代码行。

    $SubTitle = new Typecho_Widget_Helper_Form_Element_Text(
        'subTitle', null, '',
        _t('网站副标题'),
        _t('· 输入副标题文字,将显示在网站主标题后方,留空则不显示。')
    );
    $form->addInput($SubTitle);

同时在 head.php 文件,把<title><?php $this->archiveTitle([], '', ' - '); $this->options->title(); ?></title>替换成如下代码:

<title>
    <?php 
    if ($this->is('index')) {
        // 主标题
        $title = $this->options->title();
        // 副标题(去除首尾空白字符)
        $SubTitle = trim($this->options->subTitle);

        // 拼接标题
        if (!empty($SubTitle)) {
            echo $title . ' - ' . $SubTitle;
        } else {
            echo $title;
        }
    } else {
        $this->archiveTitle([], '', ' - '); 
        $this->options->title();
    }
    ?>
</title>

Lopwon:这个机制是避免浏览者点开图片后,直接翻图看文章中的所有图片,而不去阅读文字,我的博客同样使用了这样的机制,如果是文内图集,才能在图集内翻图,其他图片使用单图灯箱效果。

4、图片翻图,原主题是不能设置翻图,只能一张张的阅览,当然作者也给出解决方案,在 functions.php 文件 :

  1. 找到 'fotos-' . $fotoNum 替换为 'fotos' 
  2. 找到 'img-' . $imgNum 也替换为 'fotos'

5、如何自定义翻页翻篇的灵敏度?

1. 搜索 foot.php 文件,找到两处 navigation 函数,如下操作:

    navigation(true, 2, 1); // 第 1 个参数为 true 的,保持不变,第 2 个参数为电脑端鼠标滚轮阀值,第 3 个参数为移动端手势滑动阀值

    navigation(false, 2, 1); // 第 1 个参数为 false 的,保持不变,第 2 个参数为电脑端鼠标滚轮阀值,第 3 个参数为移动端手势滑动阀值

6、签名字体修改,更加符合主题风格 将以上修正相对路径后的 @font-face {...} 样式代码,复制。粘贴至 css/snapic.just640px.front.css 文件中,如 @font-face 的下面,并如下操作。

@font-face {
    font-family: 'Ma Shan Zheng'; /* 自定义字体名称,如果有空格,请用引号包裹,如 'Noto Sans SC' */
    src: url('../font/myfont/subset-MaShanZheng-Regular.eot');
    src: url('../font/myfont/subset-MaShanZheng-Regular.eot?#iefix') format('embedded-opentype'),
        url('../font/myfont/subset-MaShanZheng-Regular.woff2') format('woff2'),
        url('../font/myfont/subset-MaShanZheng-Regular.woff') format('woff'),
        url('../font/myfont/subset-MaShanZheng-Regular.ttf') format('truetype'),
        url('../font/myfont/subset-MaShanZheng-Regular.svg#MaShanZheng-Regular') format('svg');
    font-weight: normal; /* 字体粗细,可选 */
    font-style: normal; /* 字体样式,可选 */
    font-display: swap; /* 字体显示,必选 */

}

.sign span:first-child a 部分修改样式 font-family: 'Ma Shan Zheng'

7、这条是备注,Typecho的feed显示200字符?当然也可以使用我的插件RSS,若修改找到 feed 文件:

function safeSubstr($str, $length) {
    preg_match_all('/./us', $str, $ar);
    return implode('', array_slice($ar[0], 0, $length));
}

$this->feed->addItem([
    'title'           => $this->title,
    'content'         => $this->options->feedFullText? $this->content : safeSubstr($this->content, 200). "<p class=\"more\"><a href=\"{$this->permalink}\" title=\"{$this->title}\">[...]</a></p>",
    'date'            => $this->created,
    'link'            => $this->permalink,
    'author'          => $this->author,
    'excerpt'         => $this->___description(),
    'comments'        => $this->commentsNum,
    'commentsFeedUrl' => $feedUrl,
   'suffix'          => $suffix
]);

8、隐藏·的图片描述如何设置?也是@老街里修改的,找到 functions.php文件:

$buildImageHtml = function ($imageUrl, $altText, $gallery) use ($placeholder) {
    // 检查alt文本中是否包含"·",如果有则创建带样式的图片描述(隐藏·)
    if (stripos($altText, '·') !== false) {
        // 分割·前后的内容并取后面的部分,同时移除·符号
        $description = ltrim(explode('·', $altText, 2)[1] ?? '', '·');
        // 添加text-align: center样式使描述居中
        $escaped = sprintf('<span class="escaped"><span class="clamp">%s</span></span>', $description);
    } else {
        $escaped = '';
    }

    $blurStyle = (mb_strpos($altText, '羞') !== false) ? 'style="filter: blur(5px);"' : '';

9、备案号添加,在 foot.php 文件:

<?php echo filing('桂ICP备2022001355号-2','桂公网安备 45012702000102号','21313123'); ?>

10、添加RSS订阅和版权声明小图标在备案末尾,在 functions.php文件,找到filing部分:

function filing($icp = '', $psb = '')
{
    $icp = isset($icp) ? (string)$icp : '';
    $psb = isset($psb) ? (string)$psb : '';
    $footerDisplay = (empty($icp) && empty($psb)) ? 'style="display:none;"' : '';
    $icpDisplay = empty($icp) ? 'style="display:none;"' : '';
    $psbDisplay = empty($psb) ? 'style="display:none;"' : '';
    return <<< Lopwon
        <filing {$footerDisplay}>
            <section id="icp" {$icpDisplay}>
                <a href="http://beian.miit.gov.cn/" rel="noopener noreferrer" target="_blank">{$icp}</a>
            </section>
            <section id="psb" {$psbDisplay}>
                <a href="http://www.beian.gov.cn/" rel="noopener noreferrer" target="_blank">{$psb}</a>
            </section>
            <span style="display: flex;flex-direction: row; ">  
            <a href="https://bluehe.cn/rss.xml" rel="noopener noreferrer" target="_blank"><img src="https://bluehe.cn/usr/themes/SnapicJust640px/img/rss.png" style="width: 16px; height: 16px;"></a>  
            <a href="https://bluehe.cn/copyright.html" rel="noopener noreferrer" target="_blank"><img src="https://img.bluehe.cn/i/2025/04/08/67f4d7c3e4f70.png" style="width: 16px; height: 16px;"></a>  
            <span>
        </filing>
Lopwon;
}

主题的评论在侧边栏,包括设置阅读宽度、网站背景、导航栏,以上就是部分修改内容,更加完善,待更新......

文 / 寻鹤
源 / bluehe.cn
❌