Snapic Just 640px 主题入门

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;
}

f2434028-185e

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

文 / 寻鹤

源 / bluehe.cn

寻鹤 寻鹤 2025年10月09日
    3天前 一眨眼，国庆已经到了尾声，哪儿都没去，在家渡过这愉快的假期。
    1. 没有了
    2. 粉黛花海游记
    1 of 121
    桂ICP备2022001355号-2
    桂公网安备 45012702000102号