动态创建HTML结构

Question

我们有一个长长的HTML字符串，里面有关于我们软件制造商的信息。然而，对于i18n来说，这是难以处理的。所以我开始重构，所以只有每个人的描述是可译的，不是所有的HTML标签，也不是联系信息。我是初学者，所以可能没有使用最好的数据结构等。

这是之前的代码：

    QString aboutMudletBody(
        tr("<p align=\"center\"><big><b>Original author: <span style=\"color:#bc8942;\">A A</span></b> (<b><span style=\"color:#0000ff;\">A@A.com</span></b>)</big></p>\n"
           "<p align=\"center\"><big><b>Credits:</b></big></p>"
           "<p><span style=\"color:#bc8942;\"><big><b>B B</b></big></span> (<span style=\"color:#7289DA;\">B#1234</span> <span style=\"color:#40b040;\">b</span> <span style=\"color:#0000ff;\">B@B.org</span>) GUI design and initial feature planning. He is responsible for the project homepage and the user manual. Maintainer of the Windows, macOS, Ubuntu and generic Linux installers. Maintains the Mudlet wiki, Lua API, and handles project management, public relations & user help. With the project from the very beginning and is an official spokesman of the project. Since the retirement of A, he has become the head of the Mudlet project.</p>\n"
           "<p><span style=\"color:#bc8942;\"><big><b>C C</b></big></span> (<span style=\"color:#7289DA;\">C#1234</span> <span style=\"color:#40b040;\">C</span> <span style=\"color:#0000ff;\">C@C.com</span>) after joining in 2013, has been poking various bits of the C++ code and GUI with a pointy stick; subsequently trying to patch over some of the holes made/found.  Most recently he has been working on I18n and L10n for Mudlet 4.0.0 so if you are playing Mudlet in a language other than American English you will be seeing the results of him getting fed up with the spelling differences between what was being used and the British English his brain wanted to see.</p>\n"
           "<p><span style=\"color:#bc8942;\"><b>D D</b></span> (<span style=\"color:#40b040;\">d</span> <span style=\"color:#0000ff;\">D@D.com</span>) contributions to the Travis integration, CMake and Visual C++ build, a lot of code quality and memory management improvements.</p>\n"
           "<p><span style=\"color:#bc8942;\"><b>E E</b></span> (<span style=\"color:#40b040;\">E</span> <span style=\"color:#0000ff;\">E@E.com</span>) has developed a shared module system that allows script packages to be shared among profiles, a UI for viewing Lua variables, improvements in the mapper and all around.</p>\n"
           "<p>Others too, have make their mark on different aspects of the Mudlet project and if they have not been mentioned here it is by no means intentional! For past contributors you may see them mentioned in the <b><a href=\"https://launchpad.net/~mudlet-makers/+members#active\">Mudlet Makers</a></b> list (on our former bug-tracking site), or for on-going contributors they may well be included in the <b><a href=\"https://github.com/Mudlet/Mudlet/graphs/contributors\">Contributors</a></b> list on GitHub.</p>\n"
           "<br>\n"
           "<p>Many icons are taken from the <span style=\"color:#bc8942;\"><b><u>KDE4 oxygen icon theme</u></b></span> at <a href=\"https://web.archive.org/web/20130921230632/http://www.oxygen-icons.org/\">www.oxygen-icons.org <sup>{wayback machine archive}</sup></a> or <a href=\"http://www.kde.org\">www.kde.org</a>.  Most of the rest are from F, or from G combining bits of F's work with the other sources.</p>\n"));

我省略了一些名字，只是保留了足够的例子。

这就是现在的代码：

   QVector<QStringList> aboutBigMakers; // [name, discord, github, email, description (HTML escaped)]
    aboutBigMakers.append({QStringLiteral("A A"), 
                           QString(),
                           QString(),
                           QStringLiteral("A@A.com"),
                           tr("Original author.",
                              "about:A")});
    aboutBigMakers.append({QStringLiteral("B B"),
                           QStringLiteral("B#1234"),
                           QStringLiteral("b"),
                           QStringLiteral("B@B.org"),
                           tr("GUI design and initial feature planning. He is responsible for the project homepage and the user manual. "
                              "Maintainer of the Windows, macOS, Ubuntu and generic Linux installers. "
                              "Maintains the Mudlet wiki, Lua API, and handles project management, public relations & user help. "
                              "With the project from the very beginning and is an official spokesman of the project. "
                              "Since the retirement of A, he has become the head of the Mudlet project.",
                              "about:A")});
    aboutBigMakers.append({QStringLiteral("C C"),
                           QStringLiteral("C#1234"),
                           QStringLiteral("C"),
                           QStringLiteral("C@C.com"),
                           tr("After joining in 2013, he has been poking various bits of the C++ code and GUI with a pointy stick; "
                              "subsequently trying to patch over some of the holes made/found. "
                              "Most recently he has been working on I18n and L10n for Mudlet 4.0.0 so if you are playing Mudlet in a language "
                              "other than American English you will be seeing the results of him getting fed up with the spelling differences "
                              "between what was being used and the British English his brain wanted to see.",
                              "about:C")});

    QVector<QStringList> aboutMoreMakers;
    aboutMoreMakers.append({QStringLiteral("D D"),
                            QString(),
                            QStringLiteral("d"),
                            QStringLiteral("D@D.com"),
                            tr("Contributions to the Travis integration, CMake and Visual C++ build, "
                               "a lot of code quality and memory management improvements.",
                               "about:D")});
    aboutMoreMakers.append({QStringLiteral("E E"),
                            QString(),
                            QStringLiteral("E"),
                            QStringLiteral("E@E.com"),
                            tr("Developed a shared module system that allows script packages to be shared among profiles, a UI for viewing Lua variables, improvements in the mapper and all around.",
                               "about:E")});

    QString aboutMudletBody("<p align=\"center\"><big><b>Credits:</b></big></p>");
    QVectorIterator<QStringList> iterateBig(aboutBigMakers);
    while (iterateBig.hasNext()) { aboutMudletBody.append(createMakerHTML(iterateBig.next(), true)); }
    QVectorIterator<QStringList> iterateMore(aboutMoreMakers);
    while (iterateMore.hasNext()) { aboutMudletBody.append(createMakerHTML(iterateMore.next(), false)); }

    aboutMudletBody.append(
        tr("<p>Others too, have make their mark on different aspects of the Mudlet project and if they have not been mentioned here it is by no means intentional! For past contributors you may see them mentioned in the <b><a href=\"https://launchpad.net/~mudlet-makers/+members#active\">Mudlet Makers</a></b> list (on our former bug-tracking site), or for on-going contributors they may well be included in the <b><a href=\"https://github.com/Mudlet/Mudlet/graphs/contributors\">Contributors</a></b> list on GitHub.</p>\n"
           "<br>\n"
           "<p>Many icons are taken from the <span style=\"color:#bc8942;\"><b><u>KDE4 oxygen icon theme</u></b></span> at <a href=\"https://web.archive.org/web/20130921230632/http://www.oxygen-icons.org/\">www.oxygen-icons.org <sup>{wayback machine archive}</sup></a> or <a href=\"http://www.kde.org\">www.kde.org</a>.  Most of the rest are from F, or from G combining bits of F's work with the other sources.</p>\n"));

它长得多，但可读性更强，而且只有tr()中的重要部分供翻译者审阅。

为了与实际的HTML标记相结合，我做了另一个函数：

QString dlgAboutDialog::createMakerHTML(const QStringList aboutMaker, const bool big) const
{
    QString makerHTML;
    auto realname = aboutMaker.at(0);
    auto discord = aboutMaker.at(1);
    auto github = aboutMaker.at(2);
    auto email = aboutMaker.at(3);
    auto description = aboutMaker.at(4);    
    makerHTML.append(QStringLiteral("<p><span style=\"color:#bc8942;\">"));
    if (big) {makerHTML.append(QStringLiteral("<big>"));}
    makerHTML.append(QStringLiteral("<b>"));
    makerHTML.append(realname);
    makerHTML.append(QStringLiteral("</b>"));
    if (big) {makerHTML.append(QStringLiteral("</big>"));}
    makerHTML.append(QStringLiteral("</span> ("));
    if (!discord.isEmpty()) {
        makerHTML.append(QStringLiteral("<span style=\"color:#7289DA;\">"));
        makerHTML.append(discord);
        makerHTML.append(QStringLiteral("</span> "));
    }
    if (!github.isEmpty()) {
        makerHTML.append(QStringLiteral("<span style=\"color:#40b040;\">"));
        makerHTML.append(github);
        makerHTML.append(QStringLiteral("</span> "));
    }
    if (!email.isEmpty()) {
        makerHTML.append(QStringLiteral("<span style=\"color:#0000ff;\">"));
        makerHTML.append(email);
        makerHTML.append(QStringLiteral("</span> "));
    }
    makerHTML.append(QStringLiteral(") "));
    makerHTML.append(description);
    makerHTML.append(QStringLiteral("</p>\n"));
    return makerHTML;
}

这有点棘手，因为并不是所有的制造商都填写了所有的联系人信息。有些根本没有，有些只有一个列出，另两个或全部列出。

也许我们也需要考虑重新措辞这句话。目前，我的目标是根本不改变软件中的输出。(我这么做毕竟是为了第一个制造商，只是为了保持总体布局。)目的是减少和净化笔译员的产出，这一目标已经实现。

期待您对如何改进的反馈！:)

编辑：

我有两个提示：

1. 所有附加的字符串可能都不是很聪明。改为使用格式字符串，并使用.arg()函数填充空格。
2. 定义自己的数据结构，而不是字符串的匿名列表。也许还会把大牛也包括进去

编辑：

我去掉了createMakerHTML助手函数中的大部分附加内容，它现在看起来如下所示：

QString dlgAboutDialog::createMakerHTML(const QStringList aboutMaker, const bool big) const
{
    auto realname = aboutMaker.at(0);
    auto discord = aboutMaker.at(1);
    auto github = aboutMaker.at(2);
    auto email = aboutMaker.at(3);
    auto description = aboutMaker.at(4);

    QString coloredText("<span style=\"color:#%1;\">%2</span>");
    QStringList contactDetails;
    if (!discord.isEmpty()) {contactDetails.append(coloredText.arg("7289DA", discord));}
    if (!github.isEmpty()) {contactDetails.append(coloredText.arg("40b040", github));}
    if (!email.isEmpty()) {contactDetails.append(coloredText.arg("0000ff", email));}

    return QStringLiteral("<p>%1%2 %3</p>\n") // name (big?), contacts (if any?), description
        .arg(coloredText.arg("bc8942", QStringLiteral("<b>%1</b>")
             .arg((big) ? QStringLiteral("<big>%1</big>").arg(realname) : realname)),
             (contactDetails.isEmpty()) ? QString() :
                 QStringLiteral(" (%1)").arg(contactDetails.join(QChar::Space)),
             description);
}

既然.arg()级联的时间要短得多，但密度很高，所以很难理解。

编辑:现在还用我定义的结构替换了QStringList。如果你想看密码请告诉我。

Answer 1

避免显式构造QString和QStringLiteral对象

在许多情况下，完全没有必要显式地编写QString("...")或QStringLiteral("...")。在许多情况下，常量字符串文本将隐式转换为QString。此外，虽然在某些情况下QStringLiteral可能避免复制，但在我看来，这似乎是过早的优化。例如，只需写：

aboutBigMakers.append({"A A",
                       "",
                       "",
                       "A@A.com",
                       tr("Original author.", "about:A")});

为结构化数据

使用struct

您正在使用QStringList来保存作者的姓名、不和、github、电子邮件和描述。现在，您有一个问题，您必须记住QStringList中所有项的正确顺序，而且很容易不小心忘记将所有项添加到列表中(特别是空项)。相反，创建一个struct来显式地保存这5个项：

struct authorInformation {
    QString realname;
    QString discord;
    QString github;
    QString email;
    QString description;
};

然后，您可以构造如下作者信息的向量：

QVector<authorInformation> aboutBigMakers;
aboutBigMakers.append({"A A",
                       "",
                       "",
                       "A@A.com",
                       tr("Original author.", "about:A")});

这里没有什么变化，但在dlgAboutDialog::createMakerHTML()中，您不再需要记住列表中元素的顺序，只需编写：

QString dlgAboutDialog::createMakerHTML(const authorInformation &aboutMaker, const bool big) const
{
    QString coloredText("<span style=\"color:#%1;\">%2</span>");
    QStringList contactDetails;
    if (!aboutMaker.discord.isEmpty()) {
        contactDetails.append(coloredText.arg("7289DA", aboutMaker.discord));}
    }
    ...
}

在进行此操作时，还可以将bool big添加到struct authorInformation中，因此不必将其作为单独的函数参数传递，并且不再需要为大作者和小作者提供一个列表。

考虑使用原始字符串文本(C++11)

您有很多包含HTML代码的字符串，需要转义双引号(\")。您可以通过使用在原始字符串文字中引入的C++11来避免这种情况。

makerHTML.append(R"(<p><span style="color:#bc8942;">)");

使用模板库

实际上，您正在实现用于显示作者信息的模板。如果你能把模板写成一个大字符串，并把名字、电子邮件地址等各种各样的项目填在正确的位置上，那就好多了。您可以像使用coloredText一样使用字符串格式，但是真正的模板语言在这里更合适。我可以推荐马斯特奇，它是{胡子}模板语言的C++实现。然后，您可以将整个HTML结构写成一个大字符串，避免将许多小字符串连接起来，并避免.arg()级联。