能否支持开启开发者模式，用来参考类名制作主题 #16
Comments
|
正在制作一个文档，看能不能解决你的问题。 |
另外WIn版使用自定义主题，微信公众号模式的复制按钮点击后无反应。 |
这个我无法复现，你是如何操作的？把你的css贴出来看下。 |
:root {
/* 标题后小图标，借鉴自思源笔记主题——Savor */
--h1-r-graphic: url("data:image/svg+xml;utf8,<svg fill='rgba(235, 131, 131, 0.4)' height='24' viewBox='0 0 32 32' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M4.8 29.714v0c-1.371 0-2.514-1.143-2.514-2.514v0c0-1.371 1.143-2.514 2.514-2.514v0c1.371 0 2.514 1.143 2.514 2.514v0c0.114 1.371-1.029 2.514-2.514 2.514z'/></svg>")
no-repeat center;
--h2-r-graphic: url("data:image/svg+xml;utf8,<svg fill='rgba(174, 154, 203, 0.5)' height='24' viewBox='0 0 32 32' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M11.429 25.143c-1.257 0-2.286 1.029-2.286 2.286s1.029 2.286 2.286 2.286 2.286-1.029 2.286-2.286-1.029-2.286-2.286-2.286zM4.571 18.286c-1.257 0-2.286 1.029-2.286 2.286s1.029 2.286 2.286 2.286 2.286-1.029 2.286-2.286-1.029-2.286-2.286-2.286z'/></svg>")
no-repeat center;
--h3-r-graphic: url("data:image/svg+xml;utf8,<svg fill='rgba(125, 181, 205, 0.5)' height='28' viewBox='0 0 32 32' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M4.571 25.143c-1.257 0-2.286 1.029-2.286 2.286s1.029 2.286 2.286 2.286 2.286-1.029 2.286-2.286-1.029-2.286-2.286-2.286zM4.571 18.286c-1.257 0-2.286 1.029-2.286 2.286s1.029 2.286 2.286 2.286 2.286-1.029 2.286-2.286-1.029-2.286-2.286-2.286zM11.429 25.143c-1.257 0-2.286 1.029-2.286 2.286s1.029 2.286 2.286 2.286 2.286-1.029 2.286-2.286-1.029-2.286-2.286-2.286z'/></svg>")
no-repeat center;
--h4-r-graphic: url("data:image/svg+xml;utf8,<svg fill='rgba(113, 167, 150, 0.5)' height='24' viewBox='0 0 32 32' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M4.571 25.143c-1.257 0-2.286 1.029-2.286 2.286s1.029 2.286 2.286 2.286 2.286-1.029 2.286-2.286-1.029-2.286-2.286-2.286zM4.571 18.286c-1.257 0-2.286 1.029-2.286 2.286s1.029 2.286 2.286 2.286 2.286-1.029 2.286-2.286-1.029-2.286-2.286-2.286zM11.429 25.143c-1.257 0-2.286 1.029-2.286 2.286s1.029 2.286 2.286 2.286 2.286-1.029 2.286-2.286-1.029-2.286-2.286-2.286zM11.429 22.857c1.257 0 2.286-1.029 2.286-2.286s-1.029-2.286-2.286-2.286-2.286 1.029-2.286 2.286 1.029 2.286 2.286 2.286z'/></svg>")
no-repeat center;
--h5-r-graphic: url("data:image/svg+xml;utf8,<svg fill='rgba(103, 133, 180, 0.5)' height='24' viewBox='0 0 32 32' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M4.571 18.286c-1.257 0-2.286 1.029-2.286 2.286s1.029 2.286 2.286 2.286 2.286-1.029 2.286-2.286-1.029-2.286-2.286-2.286zM11.429 22.857c1.257 0 2.286-1.029 2.286-2.286s-1.029-2.286-2.286-2.286-2.286 1.029-2.286 2.286 1.029 2.286 2.286 2.286zM4.571 25.143c-1.257 0-2.286 1.029-2.286 2.286s1.029 2.286 2.286 2.286 2.286-1.029 2.286-2.286-1.029-2.286-2.286-2.286zM11.429 25.143c-1.257 0-2.286 1.029-2.286 2.286s1.029 2.286 2.286 2.286 2.286-1.029 2.286-2.286-1.029-2.286-2.286-2.286zM4.571 11.429c-1.257 0-2.286 1.029-2.286 2.286s1.029 2.286 2.286 2.286 2.286-1.029 2.286-2.286-1.029-2.286-2.286-2.286z'/></svg>")
no-repeat center;
--h6-r-graphic: url("data:image/svg+xml;utf8,<svg fill='rgba(93, 93, 150, 0.5)' height='24' viewBox='0 0 32 32' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M4.571 25.143c-1.257 0-2.286 1.029-2.286 2.286s1.029 2.286 2.286 2.286 2.286-1.029 2.286-2.286-1.029-2.286-2.286-2.286zM4.571 18.286c-1.257 0-2.286 1.029-2.286 2.286s1.029 2.286 2.286 2.286 2.286-1.029 2.286-2.286-1.029-2.286-2.286-2.286zM4.571 11.429c-1.257 0-2.286 1.029-2.286 2.286s1.029 2.286 2.286 2.286 2.286-1.029 2.286-2.286-1.029-2.286-2.286-2.286zM11.429 18.286c-1.257 0-2.286 1.029-2.286 2.286s1.029 2.286 2.286 2.286 2.286-1.029 2.286-2.286-1.029-2.286-2.286-2.286zM11.429 25.143c-1.257 0-2.286 1.029-2.286 2.286s1.029 2.286 2.286 2.286 2.286-1.029 2.286-2.286-1.029-2.286-2.286-2.286zM11.429 16c1.257 0 2.286-1.029 2.286-2.286s-1.029-2.286-2.286-2.286-2.286 1.029-2.286 2.286 1.029 2.286 2.286 2.286z'/></svg>")
no-repeat center;
/* 字体设置 */
--para-font-size: 14px;
/* 主题颜色 */
--head-title-color: #3f69ab; /* 标题主色 */
--head-title-h2-background: #3f69ab; /* 二级标题主色，因为二级标题是背景色的，所以单独设置 */
--element-color: #3f69ab; /* 元素主色 */
--element-color-deep: #374966; /* 元素深色 */
--element-color-shallow: #7893bf; /* 元素浅色 */
--element-color-so-shallow: #546e9954; /* 元素很浅色 */
--element-color-soo-shallow: #ffffff; /* 元素非常浅色 */
--element-color-linecode: #0e1014; /* 行内代码文字色 */
--element-color-linecode-background: #546e9954; /* 行内代码背景色 */
}
#wenyan {
max-width: 950px;
margin: 0 auto;
padding: 15px;
line-height: 2;
color: #000;
letter-spacing: 1.1px;
word-break: break-word;
word-wrap: break-word;
text-align: left;
}
#wenyan p,
section {
color: #333;
margin: 5px;
font-size: var(--para-font-size);
font-family: Optima-Regular, Optima, PingFangSC-light, PingFangTC-light,
"PingFang SC", Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
word-spacing: 2px;
}
#wenyan h3:after,
h4:after,
h5:after,
h6:after {
content: "";
display: inline-block;
margin-left: 0.2em;
height: 2em;
width: 1.2em;
vertical-align: top;
}
#wenyan h3:after {
background: var(--h3-r-graphic);
}
#wenyan h4:after {
background: var(--h4-r-graphic);
}
#wenyan h5:after {
background: var(--h5-r-graphic);
}
#wenyan h6:after {
background: var(--h6-r-graphic);
}
/* 标题字体 */
#wenyan h1,
h2,
h3,
h4,
h5,
h6 {
font-family: Optima-Regular, Optima;
}
/* 一级标题 */
#wenyan h1:after {
font-size: 1.8rem;
text-align: center;
font-weight: bold;
color: #000;
border-bottom: none;
}
#wenyan h1 {
text-align: center;
}
/* 二级标题 */
#wenyan h2 {
color:#fff;
font-size: 1.5rem;
line-height: 1.6;
width: fit-content;
font-weight: bold;
margin: 20px 0;
padding: 1px 12.5px;
border-radius: 4px;
background: var(--head-title-h2-background);
background-size: 200% 100%;
background-position: 0% 0%;
transition: all ease-in-out 0.1s;
}
#wenyan h2.md-heading a {
text-decoration: underline;
border-bottom: 0;
}
#wenyan h2:hover {
background-position: -100% -100%;
transition: all ease-in-out 0.1s;
}
/* 三级标题 */
#wenyan h3 {
width: fit-content;
margin: 20px 0;
font-size: 1.3rem;
text-align: left;
padding-left: 10px;
border-left: 5px solid var(--head-title-color);
}
/* 三级标题内容 */
#wenyan h3 span {
border-bottom: 2px hidden var(--head-title-color);
}
#wenyan h3 span:hover {
border-bottom: 2px solid var(--head-title-color);
transition: all linear 0.1s;
}
#wenyan h4 {
margin: 20px 0;
font-size: 1.15rem;
text-align: left;
}
#wenyan h4::before {
content: "";
margin-right: 7px;
display: inline-block;
background-color: var(--head-title-color);
width: 10px;
height: 10px;
border-radius: 100%;
border: var(--head-title-color) 1px solid;
vertical-align: inherit;
}
#wenyan h5 {
margin: 23px 0;
font-size: 1.1rem;
text-align: left;
}
#wenyan h5::before {
content: "";
margin-right: 7px;
display: inline-block;
background-color: #ffffff;
width: 10px;
height: 10px;
border-radius: 100%;
border: var(--head-title-color) 2px solid;
vertical-align: inherit;
}
#wenyan h6 {
margin: 23px 0;
font-size: 1.1rem;
text-align: left;
}
#wenyan h6::before {
content: "-";
color: var(--head-title-color);
margin-right: 7px;
display: inline-block;
vertical-align: inherit;
}
/* 列表 */
#wenyan ul,
ol {
font-size: var(--para-font-size);
list-style-type: disc;
margin-bottom: 0px;
margin-top: 0px;
}
#wenyan ul ul {
list-style-type: circle;
font-size: var(--para-font-size);
}
#wenyan ul ul ul {
list-style-type: square;
font-size: var(--para-font-size);
}
#wenyan ol {
padding-left: 27px;
list-style-type: decimal;
}
#wenyan ol ol {
list-style-type: lower-alpha;
}
#wenyan ol ol ol {
list-style-type: lower-roman;
}
#wenyan li {
color: #ff0000;
margin: 0px 6px;
word-spacing: 2px;
line-height: 2.5;
}
#wenyan .md-task-list-item p {
margin: 0px 1.8rem;
}
/* 引用 */
#wenyan blockquote {
margin-left: 12px;
padding: 12px;
border: 1px solid var(--element-color);
border-left-color: var(--element-color);
border-left-width: 4px;
border-radius: 4px;
line-height: 26px;
}
#wenyan blockquote p {
color: #000;
}
/* 超链接 */
#wenyan a {
color: #000;
}
#wenyan a:visited {
color: var(--element-color-deep);
}
#wenyan a:not(.md-toc-inner) {
font-weight: bolder;
text-decoration: none;
transform: all linear 0.1s;
}
#wenyan a:hover:not(.md-toc-inner) {
font-weight: bold;
color: var(--element-color-deep);
border-bottom: 1px solid var(--element-color-deep);
transform: all linear 0.1s;
}
#wenyan p a:not(.md-toc-inner)::before {
content: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024'%3E%3Cpath d='M477.934459 330.486594A50.844091 50.844091 0 0 1 406.752731 258.796425L512 152.532274a254.220457 254.220457 0 0 1 359.467726 359.467726L762.66137 618.772592a50.844091 50.844091 0 1 1-71.690168-71.690169l106.772591-106.772592a152.532274 152.532274 0 0 0-215.578947-215.578947z m70.164846 361.501489A50.844091 50.844091 0 1 1 619.789474 762.66137l-107.281033 107.281033A254.220457 254.220457 0 0 1 152.532274 512L259.813307 406.752731a50.844091 50.844091 0 1 1 72.19861 69.656405l-107.789474 107.281033a152.532274 152.532274 0 0 0 215.578947 215.578947z m-126.601788-16.77855a50.844091 50.844091 0 1 1-71.690168-71.690169l251.678252-251.678252a50.844091 50.844091 0 0 1 71.690169 71.690169z'/%3E%3C/svg%3E");
color: #f68800;
display: inline-block;
width: 1em;
height: 1em;
margin-right: 0.2em;
vertical-align: sub;
}
#wenyan a.md-toc-inner:hover {
color: var(--element-color-deep);
font-weight: 700;
text-decoration: none;
}
#wenyan sup a::before {
content: none;
}
/* 加粗 */
#wenyan strong {
color: #000;
font-weight: bold;
}
/* 斜体 */
#wenyan em {
font-style: italic;
color: #000;
}
/* 高亮 */
#wenyan mark {
font-weight: bolder;
color: #000;
background: var(--element-color-so-shallow);
}
/* 删除线 */
#wenyan del {
text-decoration-color: var(--element-color-deep);
}
/* 分隔线*/
#wenyan hr {
height: 1px;
padding: 0;
border: none;
border-top: 2px solid var(--head-title-color);
}
/* 图片*/
#wenyan img {
max-width: 90%;
height: auto;
margin: 0 auto;
display: block;
}
/* 图片描述文字 */
#wenyan figcaption {
display: block;
font-size: 13px;
color: #595959;
}
/* 行内代码 */
#wenyan p code {
padding: 2px 3px 2px 3px;
color: var(--element-color-linecode);
background: var(--element-color-linecode-background);
border-radius: 3px;
font-family: Optima-Regular, Optima;
letter-spacing: 0.5px;
}
/* 代码块外围 */
#wenyan pre {
border-radius: 5px;
font-size: 0.8em;
line-height: 2;
margin: 1em 0.5em;
padding: 1em;
background-color: #fafafa;
}
/* 代码块 */
#wenyan pre code {
display: -webkit-box;
font-family: Optima-Regular, Optima;
border-radius: 0px;
font-size: 14px;
}
/** 表格内的单元格*/
#wenyan table tr th,
#wenyan table tr td {
font-size: 14px;
color: #000;
border: none;
}
#wenyan table tr:nth-child(2n) {
background-color: inherit;
}
#wenyan table tr th {
font-weight: bold;
background-color: #fafafa;
}
#wenyan table thead {
border-top: 2px solid #ffffff;
border-bottom: 2px solid #ffffff;
}
#wenyan table tbody {
border-bottom: 2px solid #ffffff;
}
#wenyan table.md-table {
overflow: hidden;
}
#wenyan table thead {
border-top: 1px solid #dedddd;
border-bottom: 1px solid #dedddd;
}
#wenyan table tbody {
border-bottom: 1px solid #dedddd;
} |
用这个版本试一下 |
现在这个版本可以了，不过貌似after的SVG图标会在复制到微信后失效。 |
|
svg必须是本地的嵌入式的，不支持url格式的 |
|
@sumruler 我能否你的这个思源笔记主题分享到主题分享区？ |
可以 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
想自己创建一个主题，但是表格等等的类名不知道，没法写CSS，能参考的只有默认主题代码。
The text was updated successfully, but these errors were encountered: