今日头条沉浸式阅读

为今日头条PC网站添加沉浸式阅读功能，优化按钮布局
目前为 2024-08-06 提交的版本。查看最新版本。
Wrap lines
// ==UserScript==
// @name         今日头条沉浸式阅读
// @namespace    http://www.example.com/
// @version      1.0.0
// @license      MIT
// @description  为今日头条PC网站添加沉浸式阅读功能，优化按钮布局
// @author       静美书斋
// @match        https://www.toutiao.com/article/*
// @match        https://www.toutiao.com/w/*
// @grant        none
// @require      https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js
// ==/UserScript==
 
(function() {
    'use strict';
 
    // 创建沉浸阅读按钮
    const immersiveButton = $('<div>', {
        class: 'immersive-button',
        title: '沉浸阅读', // 添加悬停时显示的文字
        css: {
            'width': '45px',
            'height': '45px',
            'background-color': '#fff',
            'border': '1px solid #e8e8e8',
            'border-radius': '50%',
            'cursor': 'pointer',
            'margin': '20px auto 0',
            'display': 'flex',
            'align-items': 'center',
            'justify-content': 'center',
            'position': 'relative'
        }
    });
 
    // 添加图标
    const icon = $('<div>', {
        css: {
            'width': '22px',
            'height': '22px',
            'background-color': '#86909c',
            'mask-image': 'url("data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 24 24\'%3E%3Cpath d=\'M3 3h18v18H3V3zm2 2v14h14V5H5z\'/%3E%3C/svg%3E")',
            '-webkit-mask-image': 'url("data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 24 24\'%3E%3Cpath d=\'M3 3h18v18H3V3zm2 2v14h14V5H5z\'/%3E%3C/svg%3E")',
            'mask-size': 'cover',
            '-webkit-mask-size': 'cover'
        }
    });
 
    immersiveButton.append(icon);
 
    // 创建包裹沉浸阅读按钮的div
    const immersiveWrapper = $('<div>', {
        class: 'immersive-wrapper',
        css: {
            'text-align': 'center'
        }
    }).append(immersiveButton);
 
    // 将按钮添加到适当位置
    $('.detail-side-interaction').append(immersiveWrapper);
 
    let isImmersive = false;
 
    // 点击沉浸阅读按钮时的处理函数
    function toggleImmersiveReading() {
        isImmersive = !isImmersive;
 
        if (isImmersive) {
            // 隐藏其他交互按钮
            $('.detail-side-interaction > div:not(.immersive-wrapper)').hide();
            // 隐藏右侧信息
            $('.right-sidebar').hide();
            // 修改主体内容宽度 使用auto会存在问题，这里改用100%代替默认的676px
            $('.main').css('width', '100%');
            // 隐藏评论部分下方的第三个div
            $('.main > div:nth-child(3)').hide();
            // 隐藏右下角如首页、反馈、下载、顶部等信息
            $('.ttp-toolbar').hide();
            // 隐藏顶部信息栏
            $('.ttp-sticky-container').hide();
            // 隐藏相关推荐内容
            $('.detail-end-feed').hide();
            // 隐藏举报按钮
            $('.action').hide();
            // 隐藏seo内容
            $('.seo-hot-link-list').hide();
            
            immersiveButton.attr('title', '退出沉浸');
            icon.css('background-color', '#3385ff');
        } else {
            // 显示其他交互按钮
            $('.detail-side-interaction > div:not(.immersive-wrapper)').show();
            // 恢复右侧信息
            $('.right-sidebar').show();
            // 恢复主体内容宽度
            $('.main').css('width', '676px');
            // 恢复评论部分下方的第三个div
            $('.main > div:nth-child(3)').show();
            // 恢复右下角如首页、反馈、下载、顶部等信息
            $('.ttp-toolbar').show();
            // 恢复顶部信息栏
            $('.ttp-sticky-container').show();
            // 恢复相关推荐内容
            $('.detail-end-feed').show();
            // 恢复举报按钮
            $('.action').show();
            // 恢复seo内容
            $('.seo-hot-link-list').show();
            
            immersiveButton.attr('title', '沉浸阅读');
            icon.css('background-color', '#86909c');
        }
    }
 
    // 为沉浸阅读按钮添加点击事件
    immersiveButton.on('click', toggleImmersiveReading);
 
    // 添加悬停效果
    immersiveButton.hover(
        function() {
            $(this).css('background-color', '#f2f2f2');
        },
        function() {
            $(this).css('background-color', '#fff');
        }
    );
})();
欢迎访问Greasy Fork镜像
