https://frankelinli.github.io/blog Frankelin Docs & Blog Blog 2026-07-27T14:45:37.724Z https://github.com/jpmonette/feed Frankelin Docs & Blog Blog https://frankelinli.github.io/img/favicon.ico Copyright © 2026 frankelin, Inc. <![CDATA[2024/公众号]]> https://frankelinli.github.io/blog/2024/公众号 2026-07-27T14:45:37.724Z “验厂研究员”登录邮箱：lifrankelin@qq.com

同时可以使用我的主微信，扫码登录。我是运营者。

]]> <![CDATA[testformydd]]> https://frankelinli.github.io/blog/testformydd 2026-07-25T17:36:00.000Z <![CDATA[sticky粘性]]> https://frankelinli.github.io/blog/sticky粘性 2025-09-11T22:44:00.000Z 1️⃣ 使用 CSS position: sticky​

现代浏览器都支持 position: sticky，基本用法：

.docs-sidebar {
    position: sticky;
    top: 20px; /* 距离顶部 20px */
}

解释：​

  • position: sticky;：当滚动到这个元素时，会固定在父容器内
  • top: 20px;：距离浏览器窗口顶部的距离
  • 重要：父容器不能有 overflow: hidden 或 overflow: auto，否则 sticky 失效

2️⃣ 保证父容器高度足够​

  • 你的 <aside class="docs-sidebar"> 可能在文章内容容器里
  • sticky 只会在父容器高度范围内滚动，如果父容器太矮，侧边栏不会完全粘住
  • Astra 主题文章通常用 .entry-content 包裹，你可以用 CSS 让其 display: flex; 并让侧边栏粘性：

关键点：​

提示
  1. position: sticky 的粘性只在父元素范围内生效
    • 也就是说 <aside class="docs-sidebar"> 只能在它的直接或间接父元素（这里是 .ast-container）内“粘住”
    • 一旦滚动超出了父元素的底部，它就不再固定，而是跟随父元素自然停止
  2. 为什么会这样
    • sticky 并不是固定在整个窗口，而是“相对父容器的相对定位”
    • 父容器边界就是它的限制范围
]]> <![CDATA[WordPress自带JQuery，不需要自己额外加载]]> https://frankelinli.github.io/blog/WordPress自带JQuery，不需要自己额外加载 2024-12-25T18:17:00.000Z WordPress 核心已经自带了 jQuery，您不需要在子主题中专门 enqueue jQuery。

具体来说：

  1. WordPress 自带的 jQuery 文件位于：
wp-includes/js/jquery/jquery.js
  1. WordPress 自动注册了以下 jQuery 相关的脚本：
  • jquery
  • jquery-core
  • jquery-migrate
  1. 很多 WordPress 核心功能依赖 jQuery，所以它会自动加载。

如果您要在子主题中写 jQuery 代码，只需要这样：

// functions.php 中添加自己的 JS 文件
function my_theme_scripts() {
    wp_enqueue_script('my-custom-js', get_stylesheet_directory_uri() . '/js/custom.js', array(), '1.0', true);
}
add_action('wp_enqueue_scripts', 'my_theme_scripts');

然后在 custom.js 中直接使用 jQuery 即可：

jQuery(document).ready(function($) {
    // 您的代码
});

不需要这样做：

// ❌ 不需要这样
wp_enqueue_script('jquery');  // 不需要，WordPress 已经加载了

小提示：

  • 如果您的代码需要确保 jQuery 已加载，可以在 wp_enqueue_script 时将 jquery 添加为依赖：
wp_enqueue_script('my-custom-js', get_stylesheet_directory_uri() . '/js/custom.js', array('jquery'), '1.0', true);
]]> <![CDATA[JQuery减轻心智负担，更容易阅读和理解代码]]> https://frankelinli.github.io/blog/JQuery减轻心智负担，更容易阅读和理解代码 2024-12-25T17:53:00.000Z JQuery减轻心智负担，更容易阅读和理解代码.

对很多开发者来说，jQuery的代码更容易阅读和理解。这里有几个原因：

  1. jQuery语法更直观

    • $('.class') vs document.querySelector('.class')
    • $(element).hide() vs element.style.display = 'none'

  2. 链式操作更优雅

    // jQuery
    $('.element').hide().addClass('hidden').text('新内容');

    // 原生JS
    const element = document.querySelector('.element');
    element.style.display = 'none';
    element.classList.add('hidden');
    element.textContent = '新内容';

jQuery 的选择器语法统一且直观，这种一致性确实能减轻心智负担：

// jQuery 选择器，直观清晰
$('.announcement-bar')    // 类
$('#header')             // ID
$('div')                 // 标签
$('[data-type="news"]')  // 属性
$('ul li:first')         // 第一个li
$('p:contains("Hello")') // 包含文本的p标签

// 原生 JavaScript 要记很多不同的方法
document.querySelector('.announcement-bar')
document.getElementById('header')
document.getElementsByTagName('div')
document.querySelector('[data-type="news"]')
document.querySelector('ul li:first-child')
// 包含文本还得自己写判断...

jQuery 的选择器语法统一且直观，这种一致性确实能减轻心智负担：

  • 都是 $() 开头
  • 里面写啥选择器都行
  • 不用记那么多不同的方法名
  • 选到了就能用，选不到也不会报错

这就是为什么即便在现代前端开发中，很多人仍然喜欢用 jQuery 的原因之一 - 它让代码更易写易读！

]]> <![CDATA[CSS伪元素经典应用案例2]]> https://frankelinli.github.io/blog/CSS伪元素经典应用案例2 2024-12-23T12:46:00.000Z 我来展示几个实用且常见的伪元素应用案例：

  1. 必填表单标记：用于标记必填字段
  2. 外部链接标识：区分外部链接和内部链接
  3. 引用样式：美化引用内容
  4. 文件类型标识：根据文件类型显示不同图标
  5. 步骤指引：自动编号的步骤指示器
  6. 工具提示：无需JavaScript的简单提示框

image-20241223125504548

image-20241223125515957

<!DOCTYPE html>
<html>
<head>
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, sans-serif;
            padding: 2rem;
            background: #f5f7fa;
            line-height: 1.6;
        }

        .demo {
            margin: 2rem auto;
            max-width: 600px;
            background: white;
            padding: 2rem;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }

        /* 1. 必填表单标记 */
        .form-group {
            margin-bottom: 1rem;
        }
        .required-field::after {
            content: '*';
            color: #e53e3e;
            margin-left: 4px;
        }
        .input {
            width: 100%;
            padding: 0.5rem;
            border: 1px solid #e2e8f0;
            border-radius: 4px;
            margin-top: 0.5rem;
        }

        /* 2. 外部链接标识 */
        .external-link {
            color: #4a5568;
            text-decoration: none;
        }
        .external-link::after {
            content: '↗';
            margin-left: 4px;
            font-size: 0.9em;
            color: #718096;
        }

        /* 3. 引用样式 */
        .quote {
            position: relative;
            padding: 1.5rem;
            background: #f7fafc;
            border-radius: 8px;
        }
        .quote::before {
            content: '"';
            position: absolute;
            top: -0.5rem;
            left: 1rem;
            font-size: 4rem;
            color: #cbd5e0;
            font-family: Georgia, serif;
            line-height: 1;
        }

        /* 4. 文件类型标识 */
        .file-link {
            display: inline-block;
            padding: 0.5rem 1rem;
            text-decoration: none;
            color: #4a5568;
            background: #edf2f7;
            border-radius: 4px;
        }
        .file-link[data-type]::before {
            margin-right: 8px;
            font-weight: bold;
        }
        .file-link[data-type="pdf"]::before {
            content: '[PDF]';
            color: #e53e3e;
        }
        .file-link[data-type="doc"]::before {
            content: '[DOC]';
            color: #2b6cb0;
        }

        /* 5. 步骤指引 */
        .steps {
            counter-reset: step;
        }
        .step {
            position: relative;
            padding-left: 3rem;
            margin-bottom: 1.5rem;
        }
        .step::before {
            counter-increment: step;
            content: counter(step);
            position: absolute;
            left: 0;
            width: 2rem;
            height: 2rem;
            background: #4299e1;
            color: white;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
        }
        .step::after {
            content: '';
            position: absolute;
            left: 1rem;
            top: 2.5rem;
            bottom: -1.5rem;
            width: 2px;
            background: #e2e8f0;
        }
        .step:last-child::after {
            display: none;
        }

        /* 6. 工具提示 */
        .tooltip {
            position: relative;
            display: inline-block;
            border-bottom: 1px dotted #4a5568;
            cursor: help;
        }
        .tooltip::before {
            content: attr(data-tip);
            position: absolute;
            bottom: 100%;
            left: 50%;
            transform: translateX(-50%) translateY(-8px);
            padding: 0.5rem 1rem;
            background: #2d3748;
            color: white;
            font-size: 0.875rem;
            border-radius: 4px;
            white-space: nowrap;
            visibility: hidden;
            opacity: 0;
            transition: 0.3s ease;
        }
        .tooltip:hover::before {
            visibility: visible;
            opacity: 1;
            transform: translateX(-50%) translateY(-4px);
        }
    </style>
</head>
<body>
    <!-- 1. 必填表单 -->
    <div class="demo">
        <div class="form-group">
            <label class="required-field">用户名</label>
            <input type="text" class="input">
        </div>
        <div class="form-group">
            <label class="required-field">密码</label>
            <input type="password" class="input">
        </div>
    </div>

    <!-- 2. 外部链接 -->
    <div class="demo">
        <a href="#" class="external-link">访问 GitHub</a><br>
        <a href="#" class="external-link">查看文档</a>
    </div>

    <!-- 3. 引用样式 -->
    <div class="demo">
        <div class="quote">
            生活中最重要的不是所处的位置，而是所朝的方向。
        </div>
    </div>

    <!-- 4. 文件类型标识 -->
    <div class="demo">
        <a href="#" class="file-link" data-type="pdf">产品说明书.pdf</a><br>
        <a href="#" class="file-link" data-type="doc">使用手册.doc</a>
    </div>

    <!-- 5. 步骤指引 -->
    <div class="demo">
        <div class="steps">
            <div class="step">注册账号</div>
            <div class="step">完善信息</div>
            <div class="step">开始使用</div>
        </div>
    </div>

    <!-- 6. 工具提示 -->
    <div class="demo">
        <span class="tooltip" data-tip="这是一个帮助提示">hover我查看提示</span>
    </div>
</body>
</html>

这些都是实际开发中非常常用的案例：

  1. 必填表单标记：用于标记必填字段
  2. 外部链接标识：区分外部链接和内部链接
  3. 引用样式：美化引用内容
  4. 文件类型标识：根据文件类型显示不同图标
  5. 步骤指引：自动编号的步骤指示器
  6. 工具提示：无需JavaScript的简单提示框

这些效果的特点是：

  • 不需要额外的HTML标签
  • 可以通过CSS维护和修改
  • 提升了用户体验
  • 减少了JavaScript的依赖

需要我详细解释某个效果的实现原理吗？

]]> <![CDATA[精美的CSS伪元素制作价格标签页]]> https://frankelinli.github.io/blog/精美的CSS伪元素制作价格标签页 2024-12-23T12:39:00.000Z 这里是一个实用的价格卡片设计示例，包含多个精美的伪元素效果。价格标签是伪元素应用的经典案例。

image-20241223124218808

<!DOCTYPE html>
<html>
<head>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background: #f5f7fa;
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial;
        }

        .container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 2rem;
            padding: 2rem;
            max-width: 1200px;
            width: 100%;
        }

        .card {
            position: relative;
            background: white;
            border-radius: 12px;
            padding: 2rem;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s ease;
        }

        .card:hover {
            transform: translateY(-5px);
        }

        /* 1. 精美的价格标签 */
        .price {
            position: relative;
            font-size: 1.5rem;
            color: #2d3748;
            font-weight: bold;
        }

        .price::before {
            content: '¥';
            font-size: 1rem;
            position: relative;
            top: -0.5rem;
            margin-right: 0.2rem;
        }

        .price::after {
            content: '/月';
            font-size: 0.9rem;
            color: #718096;
            margin-left: 0.2rem;
        }

        /* 2. 优雅的链接下划线 */
        .fancy-link {
            position: relative;
            color: #4a5568;
            text-decoration: none;
            font-weight: 500;
        }

        .fancy-link::after {
            content: '';
            position: absolute;
            width: 100%;
            height: 2px;
            bottom: -2px;
            left: 0;
            background: linear-gradient(90deg, #667eea, #764ba2);
            transform: scaleX(0);
            transform-origin: right;
            transition: transform 0.3s ease;
        }

        .fancy-link:hover::after {
            transform: scaleX(1);
            transform-origin: left;
        }

        /* 3. 高级特性标记 */
        .feature {
            position: relative;
            padding-left: 1.5rem;
            margin: 0.8rem 0;
            color: #4a5568;
        }

        .feature::before {
            content: '';
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            width: 16px;
            height: 16px;
            background: linear-gradient(45deg, #667eea, #764ba2);
            border-radius: 50%;
            opacity: 0.2;
        }

        .feature::after {
            content: '✓';
            position: absolute;
            left: 4px;
            top: 50%;
            transform: translateY(-50%);
            color: #4a5568;
            font-size: 0.8rem;
        }

        /* 4. 热门标签 */
        .popular {
            position: relative;
            overflow: hidden;
        }

        .popular::before {
            content: 'HOT';
            position: absolute;
            top: 20px;
            right: -24px;
            background: #ed64a6;
            color: white;
            padding: 4px 30px;
            font-size: 0.75rem;
            transform: rotate(45deg);
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }

        /* 5. 分割线 */
        .divider {
            position: relative;
            margin: 1.5rem 0;
            height: 1px;
        }

        .divider::before {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 1px;
            background: linear-gradient(90deg, 
                transparent,
                rgba(0,0,0,0.1) 50%,
                transparent
            );
        }

        .btn {
            display: inline-block;
            padding: 0.8rem 1.5rem;
            background: linear-gradient(90deg, #667eea, #764ba2);
            color: white;
            border-radius: 6px;
            text-decoration: none;
            font-weight: 500;
            transition: transform 0.2s ease;
        }

        .btn:hover {
            transform: translateY(-2px);
        }

    </style>
</head>
<body>
    <div class="container">
        <div class="card">
            <div class="price">199</div>
            <div class="divider"></div>
            <div class="feature">无限存储空间</div>
            <div class="feature">实时多端同步</div>
            <div class="feature">个性化定制</div>
            <div class="divider"></div>
            <a href="#" class="fancy-link">查看详情</a>
        </div>

        <div class="card popular">
            <div class="price">299</div>
            <div class="divider"></div>
            <div class="feature">企业级支持</div>
            <div class="feature">高级数据分析</div>
            <div class="feature">专属客服服务</div>
            <div class="feature">优先级解决问题</div>
            <div class="divider"></div>
            <a href="#" class="btn">立即购买</a>
        </div>
    </div>
</body>
</html>

这个示例展示了5个实用的伪元素应用：

  1. 价格标签：使用::before和::after添加货币符号和时间单位
  2. 链接特效：渐变色下划线动画
  3. 特性列表：用伪元素创建优雅的复选标记
  4. 热门标签：角标设计
  5. 分割线：渐变分隔符

这些效果都是实际开发中常用的，可以直接应用到实际项目中。

]]> <![CDATA[CSS伪元素解释]]> https://frankelinli.github.io/blog/CSS伪元素 2024-12-23T11:17:00.000Z CSS伪元素并没有真正生成HTML元素，它们只是在视觉呈现层面上的效果。

关键区别：

  1. 用JavaScript获取DOM时，无法直接获取到伪元素
  2. 伪元素不会出现在HTML结构中
  3. 伪元素不会影响文档的语义结构
  4. 不能给伪元素绑定事件监听器

举个例子：

<div class="box">你好</div>
.box::after {
  content: "世界";
}

虽然页面上会显示"你好世界"，但：

  • document.querySelector('.box').childNodes 只能看到"你好"
  • 查看元素时只能看到 <div class="box">你好</div>
  • 伪元素"世界"只存在于浏览器的渲染层面

所以更准确地说，伪元素是CSS提供的一种视觉效果机制，而不是真正的DOM元素。这也是为什么叫"伪"元素。

]]> <![CDATA[astra header页眉下划线动画]]> https://frankelinli.github.io/blog/astra header页眉下划线动画 2024-12-22T12:56:00.000Z 对于Astra主题头部菜单导航的hover下划线动画效果，CSS伪元素即可实现：

CSS代码：​


.main-header-menu a {
    position: relative;
}

.main-header-menu a::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: -2px;
    left: 0;
    background-color: currentColor;
    transition: width 0.2s ease-out;
    opacity: 1;
}

.main-header-menu a:hover::after {
    width: 100%;
}

position: relative不可以去掉​

.main-header-menu a { position: relative; }

不可以去掉。position: relative 是必需的，因为它建立了一个定位上下文，是下划线动画正常工作的关键。

原因是：

  1. ::after 伪元素使用了 position: absolute
  2. 没有 position: relative 的父元素，绝对定位的下划线将相对于最近的已定位祖先元素定位
  3. 这可能导致下划线出现在错误的位置

使用currentColor​

使用currentColor，这样下划线颜色会自动跟随Astra主题设置的菜单颜色

]]> <![CDATA[WordPress管理后台设置里添加维护模式开关]]> https://frankelinli.github.io/blog/WordPress管理后台设置里添加维护模式开关 2024-12-21T18:17:00.000Z
  • 维护模式下返回503状态码，对SEO更友好
  • 管理员可以继续正常访问站点
  • 简单的开关控制
  • 维护模式菜单移到"设置"菜单下


    • // 添加维护模式功能
    function csrwiki_maintenance_mode() {
        // 添加设置菜单 - 放到"设置"下
        add_action('admin_menu', function() {
            add_options_page(
                '维护模式设置', 
                '维护模式', 
                'manage_options', 
                'maintenance-settings', 
                'csrwiki_maintenance_settings_page'
            );
        });

        // 注册设置
        add_action('admin_init', function() {
            register_setting('maintenance-settings-group', 'maintenance_mode_active');
        });

        // 在wp加载早期检查维护模式
        add_action('wp', 'csrwiki_check_maintenance_mode');
    }
    // 检查维护模式状态
    function csrwiki_check_maintenance_mode() {
        // 如果维护模式已启用且当前用户不是管理员
        if (get_option('maintenance_mode_active') && !current_user_can('manage_options')) {
            // 确保不是wp-admin页面
            if (!is_admin() && !wp_doing_ajax()) {
                wp_die(
                    '<div style="text-align: center; padding: 50px 20px;">
                        <h1>网站维护中</h1>
                        <p>我们正在进行系统维护，请稍后再访问。</p>
                    </div>',
                    '网站维护中',
                    array(
                        'response' => 503,
                        'back_link' => false,
                    )
                );
            }
        }
    }

    // 设置页面HTML
    function csrwiki_maintenance_settings_page() {
        ?>
        <div class="wrap">
            <h1>维护模式设置</h1>
            <form method="post" action="options.php">
                <?php settings_fields('maintenance-settings-group'); ?>
                <?php do_settings_sections('maintenance-settings-group'); ?>
                <table class="form-table">
                    <tr>
                        <th scope="row">维护模式状态</th>
                        <td>
                            <label>
                                <input type="checkbox" name="maintenance_mode_active" value="1" <?php checked(1, get_option('maintenance_mode_active'), true); ?> />
                                启用维护模式
                            </label>
                        </td>
                    </tr>
                </table>
                <?php submit_button(); ?>
            </form>
        </div>
        <?php
    }

    // 初始化维护模式功能
    csrwiki_maintenance_mode();

    如果开关不开启，代码就不工作，不会影响性能​

    是的，性能影响可以忽略不计。让我解释代码执行过程：

    1. 插件注册了两个主要行为：

      • admin_menu hook：仅在后台运行时加载
      • admin_init hook：仅在后台运行时加载
      • wp hook：虽然每次都会执行，但只是一个简单的条件判断

    2. 具体分析维护模式关闭时的执行流程：

    function csrwiki_check_maintenance_mode() {
        // 当维护模式未开启时，这个if判断直接返回
        if (get_option('maintenance_mode_active') && !current_user_can('manage_options')) {
            // 维护模式关闭时，这里面的代码完全不会执行
        }
    }

    性能开销极小，原因：

    • get_option() 是WordPress核心函数，有内置缓存
    • 条件判断失败后立即返回
    • 没有额外的数据库查询
    • 没有额外的文件加载
    • 不会执行任何DOM操作

    所以你完全不用担心性能问题。这是一个非常轻量级的功能实现。

    ]]>