对于我正在创建的 Discord Bot，我需要通过“配置文件”命令生成用户配置文件。 HTML 显示正常，但未使用我的任何 CSS 样式。如何获取包含我的 CSS 样式的 html 字符串？
我对 HTML 和 CSS 没有多少经验(这是别人为我制作的)，但我相信 href 是 CSS 的引用位置。我已经尝试插入文档的名称 stylesheet.css 但没有成功(也许 HTML 找不到它)。现在，它由 {0} 表示，这是我的格式化字符串中的第一个对象。 {0} 是它上面的 css 字符串变量。
这些字符串中的每个\n 都是通常的 Enter 击键，这只是为了让机器人可以读取它。我在下面包含了原始的 HTML 和 CSS 文件。
[Command("profile")] //Generates a user's profile using HTML / CSS
public async Task Profile()
{
var account = UserAccounts.GetAccount(Context.User);
string css = "@font-face {\n font-family: 'Raleway';\n src: URL('Raleway-Regular.ttf') format('truetype');\n}\n\nhtml " +
"{\n \n font-family: 'Raleway', sans-serif;\n \n}\n\n#probar {\n \n height:24px;\n width:50%;\n " +
"background-color: skyblue;\n border-radius: 30px;\n \n}\n\n#probox {\n \n background-color: lightblue;\n " +
"width: 100%;\n margin: auto;\n border-radius: 30px;\n \n}\n\n#window {\n \n width: 300px;\n " +
"background-color: lightgray;\n margin: 0;\n/*\n background-image: url(dafef97cb397e61f4c47ef27523b092c.jpg);\n " +
"background-size:cover;\n background-repeat: no-repeat;\n*/\n \n}\n\n#header {\n \n width: 90%;\n margin: auto;\n " +
"padding-top: 10px;\n \n}\n\n#pfp {\n\n height: 150px;\n width: 150px;\n border-radius: 30px;\n margin: auto;\n " +
"border: gray solid 1px;\n \n}\n\n#name {\n \n text-align: center;\n \n}\n\n#content{\n \n width: 90%;\n margin: auto;\n " +
"padding-bottom: 10px;\n color: black;\n \n}\n\n.info {\n \n padding-bottom: 5px;\n font-size: 12px;\n \n}\n" +
"\n#row {\n \n display: flex;\n color: black;\n \n}\n\n#level {\n \n margin: auto;\n \n}\n\n#yes {\n \n margin: 0;\n text-align: center;\n \n}" +
"\n\n#no {\n\n font-size: 40px;\n margin: 0;\n text-align: center;\n border: solid black 1px;\n\n}\n\n#infolist {\n \n text-align: center;\n margin-top: 15px;\n \n}" +
"\n\n#statlist {\n \n text-align: right;\n margin-top: 15px;\n \n}\n\n.inforow {\n \n flex-grow: 1;\n width: 33.3%;\n \n}\n\n#fixedbs {\n \n text-align: center;\n " +
"position: absolute;\n top: 206px;\n left: 70px;\n color: black;\n \n}\n\n";
string html = String.Format("<!doctype html>\n\n<html lang=\"en\">\n<head>\n \n <meta charset=\"utf-8\">\n\n <title>StageBot User Profile</title>\n\n " +
"<link rel=\"stylesheet\" href=\"{0}\">\n\n</head>\n\n<body> \n \n <div id=\"window\">\n \n <div id=\"header\">\n\n " +
"<div id=\"pfp\"></div>\n\n <p id=\"name\"><b>{1}#{2}</b></p>\n\n </div>\n\n <div id=\"content\">\n\n " +
"<div id=\"probox\">\n\n <div id=\"probar\"></div>\n\n <p id=\"fixedbs\"><i>cur lvl prog / total lvl exp</i></p>\n\n " +
"</div>\n\n <div id=\"row\">\n\n <div class=\"inforow\" id=\"level\">\n\n <p id=\"yes\">Level</p>\n " +
" <p id=\"no\"><b>11</b></p>\n\n </div>\n\n <div class=\"inforow\" id=\"infolist\">\n <p class=\"info\">Total EXP</p>\n" +
" <p class=\"info\">Server Rank</p>\n <p class=\"info\">Global Rank</p>\n </div>\n\n <div class=\"inforow\" id=\"statlist\">\n" +
" <p class=\"info\">xxxxEXP</p>\n <p class=\"info\">#xxxx</p>\n <p class=\"info\">#xxxx</p>\n </div>\n\n </div>\n\n " +
" </div> \n \n </div>\n \n</body>\n</html>", css, Context.User.Username, Context.User.Discriminator);
var converter = new HtmlToImageConverter
{
Width = 400,
Height = 400
};
var pngBytes = converter.GenerateImage(html, NReco.ImageGenerator.ImageFormat.Png);
await Context.Channel.SendFileAsync(new MemoryStream(pngBytes), "Profile.png");
}
CSS
@font-face {
font-family: 'Raleway';
src: URL('Raleway-Regular.ttf') format('truetype');
}
html {
font-family: 'Raleway', sans-serif;
}
#probar {
height:24px;
width:50%;
background-color: skyblue;
border-radius: 30px;
}
#probox {
background-color: lightblue;
width: 100%;
margin: auto;
border-radius: 30px;
}
#window {
width: 300px;
background-color: lightgray;
margin: 0;
/*
background-image: url(dafef97cb397e61f4c47ef27523b092c.jpg);
background-size:cover;
background-repeat: no-repeat;
*/
}
#header {
width: 90%;
margin: auto;
padding-top: 10px;
}
#pfp {
height: 150px;
width: 150px;
border-radius: 30px;
margin: auto;
border: gray solid 1px;
}
#name {
text-align: center;
}
#content{
width: 90%;
margin: auto;
padding-bottom: 10px;
color: black;
}
.info {
padding-bottom: 5px;
font-size: 12px;
}
#row {
display: flex;
color: black;
}
#level {
margin: auto;
}
#yes {
margin: 0;
text-align: center;
}
#no {
font-size: 40px;
margin: 0;
text-align: center;
border: solid black 1px;
}
#infolist {
text-align: center;
margin-top: 15px;
}
#statlist {
text-align: right;
margin-top: 15px;
}
.inforow {
flex-grow: 1;
width: 33.3%;
}
#fixedbs {
text-align: center;
position: absolute;
top: 206px;
left: 70px;
color: black;
}
HTML:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>discord thing</title>
<link rel="stylesheet" href="stylesheet.css">
</head>
<body>
<div id="window">
<div id="header">
<div id="pfp"></div>
<p id="name"><b>Garonen#6115</b></p>
</div>
<div id="content">
<div id="probox">
<div id="probar"></div>
<p id="fixedbs"><i>cur lvl prog / total lvl exp</i></p>
</div>
<div id="row">
<div class="inforow" id="level">
<p id="yes">Level</p>
<p id="no"><b>11</b></p>
</div>
<div class="inforow" id="infolist">
<p class="info">Total EXP</p>
<p class="info">Server Rank</p>
<p class="info">Global Rank</p>
</div>
<div class="inforow" id="statlist">
<p class="info">xxxxEXP</p>
<p class="info">#xxxx</p>
<p class="info">#xxxx</p>
</div>
</div>
</div>
</div>
</body>
</html>
对于输出，我正在寻找一些东西 like this
目前，输出是this
最佳答案
<link>当我们要引用外部 css 文件时使用标签。在您的示例中，我们有一个包含实际 css 代码的 css 字符串，因此您必须使用 <style>标签。请更换整个 html下面给出的字符串变量。
string html = String.Format("<!doctype html>\n\n<html lang=\"en\">\n<head>\n \n <meta charset=\"utf-8\">\n\n <title>StageBot User Profile</title>\n\n " +
"<style>{0}</style>\n\n</head>\n\n<body> \n \n <div id=\"window\">\n \n <div id=\"header\">\n\n " +
"<div id=\"pfp\"></div>\n\n <p id=\"name\"><b>{1}#{2}</b></p>\n\n </div>\n\n <div id=\"content\">\n\n " +
"<div id=\"probox\">\n\n <div id=\"probar\"></div>\n\n <p id=\"fixedbs\"><i>cur lvl prog / total lvl exp</i></p>\n\n " +
"</div>\n\n <div id=\"row\">\n\n <div class=\"inforow\" id=\"level\">\n\n <p id=\"yes\">Level</p>\n " +
" <p id=\"no\"><b>11</b></p>\n\n </div>\n\n <div class=\"inforow\" id=\"infolist\">\n <p class=\"info\">Total EXP</p>\n" +
" <p class=\"info\">Server Rank</p>\n <p class=\"info\">Global Rank</p>\n </div>\n\n <div class=\"inforow\" id=\"statlist\">\n" +
" <p class=\"info\">xxxxEXP</p>\n <p class=\"info\">#xxxx</p>\n <p class=\"info\">#xxxx</p>\n </div>\n\n </div>\n\n " +
" </div> \n \n </div>\n \n</body>\n</html>", css, Context.User.Username, Context.User.Discriminator);
关于c# - 如何将 css 代码引用到 HtmlToImageConverter，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55310171/