qt Doc优化成Web配置记录

1.找到原版Qt文档

在安装qt以后，可以在安装目录中找到原版Qt文档

Windows中

c:\Qt\Docs

将c:\Qt\Docs目录下的内容拷贝出来即为原版qt文档

2.编写优化js脚本

在qt文档根目录新建js目录，并在js目录中新建noTranslate.js脚本文件，内容如下

// 设置不翻译的元素
let setNoTranslate = () => {
    document.querySelectorAll(".fn, .cpp, .prevPage, .nextPage, .topAlign.tblval, .memItemLeft.rightAlign.topAlign, .topAlign.tblval, .memItemRight.bottomAlign, .navigationbar, .title, .tblQmlPropNode, .tblQmlFuncNode, .footer, .qml, .tblName").forEach(item => {
        item.classList.add("no-translate");
        item.setAttribute("translate", "no");
        item.style.translate = 'none';
    });
};

// 设置页面中的导航目录为浮动，不随窗口滑动
let setTocFloat = () => {
    // 获取页面中的sidebar元素  
    let sidebar = document.querySelector('.toc');
    if (sidebar) {
        // 设置sidebar的定位方式为绝对定位  
        sidebar.style.position = 'fixed';

        // 设置sidebar的位置  
        sidebar.style.top = '10'; // 顶部距离页面顶部的距离  
        sidebar.style.right = '0'; // 左侧距离页面左侧的距离
    }
};

// 设置sidebar透明度为 1
let element = document.querySelector('.sidebar');  
element.style.opacity = 1;

// 为导航目录添加点击标题实现 显示/隐藏 的功能
let setTocHidden = () => {
    // 获取 h3 元素  
    const tocH3 = document.querySelector('.toc h3');
    // tocH3.textContent = "Contents  折叠/展开"

    if (tocH3) {
        // 为 h3 元素添加点击事件监听器  
        tocH3.addEventListener('click', function () {
            // 获取同级的 ul 元素  
            const tocUl = this.nextElementSibling;
            // 切换 ul 元素的显示状态  
            tocUl.style.display = tocUl.style.display === 'none' ? 'block' : 'none';

            // 选择第一个类名为 "sidebar" 的元素  
            let element = document.querySelector('.sidebar');
            // 设置透明度为 0.5  
            console.log(element.style.opacity)
            element.style.opacity = element.style.opacity == 1 ? 0.5 : 1;
        });
    }
};

// 添加回到顶部功能
let setToTop = () => {
    // 创建一个新的 h2 元素  
    let h2Element = document.createElement('h3');

    let deviceWidth = window.innerWidth;
    h2Element.textContent = '⬆️ 回到顶部';
    // h2Element.textContent = deviceWidth + 'px';

    h2Element.style.textAlign = "center";
    h2Element.style.marginTop = "15px";

    // 为 h2 元素添加点击事件监听器  
    h2Element.addEventListener('click', function () {
        // 使用 window.scrollTo 方法回到顶部  
        window.scrollTo({
            top: 0,
            behavior: 'smooth'
        });
    });

    // 找到类名为 toc 的 div 元素  
    let tocDiv = document.querySelector('.toc');
    if (tocDiv) {
        // 将 h2 元素添加到 div 中  
        tocDiv.appendChild(h2Element);
    }
};

// 设置网页宽度为设备宽度
let setWindowWidth = () => {
    // 创建一个新的meta标签  
    var metaTag = document.createElement('meta');
    // 设置meta标签的属性，例如name和content  
    metaTag.setAttribute('name', 'viewport');
    metaTag.setAttribute('content', 'width=device-width, initial-scale=1');
    // 将meta标签添加到head标签中  
    document.getElementsByTagName('head')[0].appendChild(metaTag);
};

// 修复网页中某些图片过宽，导致撑宽网页宽度
let fixedImgWidth = () => {
    let deviceWidth = window.innerWidth;
    if (deviceWidth < 1000) {
        let elements = document.querySelectorAll('.centerAlign');

        elements.forEach(function (element) {
            element.style.maxWidth = (deviceWidth * 0.75) + 'px';

            let images = element.querySelectorAll('img');
            images.forEach(function (img) {
                img.style.width = '100%';
            });
        });
    }
}


setNoTranslate();
setTocFloat();
setTocHidden();
setToTop();
setWindowWidth();
fixedImgWidth();

3.将js优化文件引入到html文档中

js目录中新建repalce.js脚本文件，内容如下

const fs = require('fs');
const path = require('path');

function replaceStringInFile(filePath) {
    fs.readFile(filePath, 'utf8', function (err, data) {
        if (err) {
            console.error(err);
            return;
        }

        const replacedData = data.replace("</div>\n</body>", "</div>\n<script src=\"../js/noTranslate.js\"></script>\n</body>");

        fs.writeFile(filePath, replacedData, 'utf8', function (err) {
            if (err) {
                console.error(err);
                return;
            }
            console.log(`String replaced in ${filePath}`);
        });
    });
}

function traverseAndReplace(directoryPath) {
    fs.readdirSync(directoryPath).forEach(file => {
        const fullPath = path.join(directoryPath, file);

        if (fs.statSync(fullPath).isDirectory()) {
            traverseAndReplace(fullPath);
        } else if (fullPath.endsWith('.html')) {
            replaceStringInFile(fullPath);
        }
    });
}

const directoryPath = '/Users/用户名/Downloads/Qt-5.15.2'; // mac下路径，绝对路径 使用时注意修改
traverseAndReplace(directoryPath);

保存文件后打开终端，cd到js目录下执行node repalce.js即可完成引入