2024年2月2日,陈十一的小破站开馆.....
映入眼帘的Typecho前后台让我两眼发黑,这个世界居然还存在如此古老的UI?!于是乎,我尝试寻找Typecho的装修教程,结果呢?煤油!
于是不甘于此的王师傅开启了他的装修之路
关于Blog样式
前台模板采用极简主义(jasmine)进行魔改
- 找这个模板找的我好苦
- 不是handsome的88买不起,而是魔改更有性价比
- 主题内置的样式很不错
- 此修改高亮样式 + 文章Markdown样式
- 使用Snow插件就有下雪效果啦
- 自定义CSS+JS在文末附上
Typecho后台模板不得我心,于是借助第三方+修改
- 使用小王先森的WordStyle进行typecho后台美化
- 使用不知名小站分享的后台LoginRegister美化
- LoginRegister美化有点花,微调更简约了
插件可谓是煞费苦心
Typecho好一点的插件都得付钱,不能白嫖- Typecho的生态不如Wordpress,找到的插件都是老掉牙的版本,亦或者样式落后时代
我使用的插件:
- Links 友情链接插件
- PartiallyPassword 文章部分内容加密(找不到作者)
- SiteMaintenance 站点维护(似乎没啥实际意义)
Snow与WordStyle上面提过
我试错的插件(QAQ)
关于说说页面
- Jasmine主题自带说说类型
因为自带的不仅会在标签页面出现,还会在文章页面出现,我觉得不好看,于是我吧文章的说说删除了
- 修改
post-item-moment.php
文件,加个简易版if就行(毕竟自己用嘛) - 简易版if太丑陋了,就不展示了,具体ChatGPT就行
- 修改
附上CSS与JS
/* 文章样式-Start */
.markdown-body {
font-family: ptima-Regular;
word-break: break-all;
}
.markdown-body p {
margin-top: 5px;
margin-bottom: 5px;
line-height: 26px;
word-spacing: 3px;
letter-spacing: 3px;
text-align: justify;
color: #3e3e3e;
font-size: 16px;
text-indent: 2em;
}
.markdown-body h1 {
font-size: 1.8em;
color: #009688;
margin: 1.2em auto;
text-align: center;
border-bottom: 1px solid #009688;
}
.markdown-body h2 {
color: #009688;
padding-left: 10px;
margin: 1em auto;
border-left: 3px solid #009688;
}
.markdown-body h3 {
margin: 0.6em auto;
padding-left: 10px;
border-left: 2px solid #009688;
}
.markdown-body h4 {
margin: 0.6em auto;
font-size: 1.2em;
padding-left: 10px;
border-left: 2px dashed #009688;
}
.markdown-body h5 {
margin: 0.6em auto;
font-size: 1.1em;
padding-left: 10px;
border-left: 1px dashed #009688;
}
.markdown-body h6 {
margin: 0.6em auto;
font-size: 1em;
padding-left: 10px;
border-left: 1px dotted #009688;
}
.markdown-body ul {}
.markdown-body ol {}
.markdown-body li section {}
.markdown-body blockquote {
border-left: 2px solid #888;
border-right: 2px solid #888;
padding-left: 1em;
color: #777;
padding-top: 25px;
padding-bottom: 25px;
}
.markdown-body blockquote p {}
.markdown-body a {
color: #009688;
border-bottom: 1px solid #009688;
}
.markdown-body strong {}
.markdown-body em {}
.markdown-body em strong {}
.markdown-body del {}
.markdown-body hr {
margin: 20px 0;
}
.markdown-body img {}
.markdown-body figcaption {}
.markdown-body p code,
.markdown-body li code {
color: #009688;
}
.markdown-body pre code {
display: block;
}
.markdown-body table tr th {
border: 1px solid #009688;
background-color: #009688;
color: #f8f8f8;
border-bottom: 0;
}
.markdown-body table tr td {
border: 1px solid #009688;
}
.markdown-body table tr:nth-child(2n) {
background-color: #f8f8f8;
}
.markdown-body .footnote-word {
color: #009688;
}
.markdown-body .footnote-ref {
color: #009688;
}
.markdown-body .footnotes-sep:before {
content: "参考资料";
}
.markdown-body .footnote-num {}
.markdown-body .footnote-item p {}
.markdown-body .footnote-item p em {}
.markdown-body .block-equation svg {
max-width: 300% !important;
}
.markdown-body .inline-equation svg {}
/* 文章样式-End */
/* 代码样式-Start */
code[class*="language-"],
pre[class*="language-"] {
color: #f8f8f2;
text-shadow: 0 1px rgba(0, 0, 0, .3);
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
text-align: left;
white-space: pre;
word-spacing: normal;
word-break: normal;
word-wrap: normal;
line-height: 2;
-moz-tab-size: 4;
-o-tab-size: 4;
tab-size: 4;
-webkit-hyphens: none;
-moz-hyphens: none;
-ms-hyphens: none;
hyphens: none;
font-size: 13px;
}
pre[class*="language-"] {
overflow: auto;
}
:not(pre)>code[class*="language-"],
pre[class*="language-"] {
background: #21252a
}
:not(pre)>code[class*="language-"] {
padding: .1em;
border-radius: .3em;
white-space: normal
}
.token.comment,
.token.block-comment,
.token.prolog,
.token.doctype,
.token.cdata {
color: #999;
}
.token.punctuation {
color: #ccc;
}
.token.tag,
.token.attr-name,
.token.namespace,
.token.deleted {
color: #e2777a;
}
.token.function-name {
color: #6196cc;
}
.token.boolean,
.token.number,
.token.function {
color: #f08d49;
}
.token.property,
.token.class-name,
.token.constant,
.token.symbol {
color: #f8c555;
}
.token.selector,
.token.important,
.token.atrule,
.token.keyword,
.token.builtin {
color: #cc99cd;
}
.token.string,
.token.char,
.token.attr-value,
.token.regex,
.token.variable {
color: #7ec699;
}
.token.operator,
.token.entity,
.token.url {
color: #67cdcc;
}
.token.important,
.token.bold {
font-weight: bold;
}
.token.italic {
font-style: italic;
}
.token.entity {
cursor: help;
}
.token.inserted {
color: green;
}
pre.line-numbers {
counter-reset: linenumber;
margin-top: 0px;
}
pre.line-numbers>code {
white-space: inherit font-size:15px
}
.line-numbers .line-numbers-rows {
position: absolute;
pointer-events: none;
top: 0px;
font-size: 100%;
left: 0em;
width: 3em;
letter-spacing: -1px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.line-numbers-rows>span {
pointer-events: none;
display: block;
counter-increment: linenumber
}
.line-numbers-rows>span:before {
content: counter(linenumber);
color: #999;
display: block;
padding-right: .9em;
text-align: right;
background: #272c33
}
div.code-toolbar {
font-size: 100%;
border-radius: 4px;
position: relative;
box-shadow: 0 0 20px 5px rgba(0, 0, 0, .4);
padding-top: 30px;
background-color: #161616;
margin: 20px 0 20px 0
}
.code-toolbar:before {
content: " ";
position: absolute;
-webkit-border-radius: 50%;
border-radius: 50%;
background: #fc625d;
width: 11px;
height: 11px;
left: 10px;
top: 10px;
-webkit-box-shadow: 20px 0 #fdbc40, 40px 0 #35cd4b;
box-shadow: 20px 0 #fdbc40, 40px 0 #35cd4b;
z-index: 2
}
div.code-toolbar>.toolbar {
padding-right: .4em;
position: absolute;
top: .09em;
right: .2em;
width: 100%;
text-align: center;
}
div.code-toolbar:hover>.toolbar {
opacity: 1
}
div.code-toolbar>.toolbar .toolbar-item {
padding: 0 1px 1px 3px;
display: inline-block
}
div.code-toolbar>.toolbar button {
cursor: pointer;
transition: all .3s;
position: absolute;
background-color: transparent;
right: 6px;
top: 4px;
font-size: 12px;
line-height: 12px;
padding: 3px 5px;
border: 1px solid;
border-radius: 6px;
opacity: 0;
color: #FFF;
}
div.code-toolbar:hover button {
opacity: 1;
}
div.code-toolbar>.toolbar:hover {
text-decoration: none !important
}
div.code-toolbar>.div.code-toolbar>.toolbar button,
div.code-toolbar>.toolbar span {
font-family: 'Ubuntu', sans-serif;
font-weight: bold;
font-size: .9em;
opacity: 0;
color: #FFF;
}
div.code-toolbar:hover .toolbar span {
opacity: 1;
}
#post-content .code-block-fullscreen {
padding-top: 32px;
position: fixed;
width: 80vw;
height: 80vh;
min-height: 80vh;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
z-index: 9999999;
box-shadow: 0 0 20px 0 rgba(255, 255, 255, .4);
animation: elastic 1s;
overflow: hidden;
background: #21252a;
}
.code-block-fullscreen code {
--widthA: 100%;
--widthB: calc(var(--widthA) - 30px);
height: var(--widthB);
min-height: 99%;
overflow-y: scroll;
height: 100%;
}
.code-block-fullscreen-html-scroll {
overflow: hidden;
}
.shelter {
width: 6.5px;
height: 6.5px;
z-index: 100;
background: #313238;
position: absolute;
bottom: 0;
right: 0;
}
.max-img::-webkit-scrollbar-track-piece {
background: #eee
}
.max-img::-webkit-scrollbar {
width: 8px;
height: 6px
}
.max-img::-webkit-scrollbar-thumb {
border-radius: 6px;
background-color: #777
}
.max-img::-webkit-scrollbar-thumb:hover {
background-color: #bbb
}
pre::-webkit-scrollbar-track-piece {}
pre::-webkit-scrollbar {
width: 8px;
height: 6px
}
pre::-webkit-scrollbar-thumb {
border-radius: 4px;
background-color: #cbcbcb
}
pre::-webkit-scrollbar-thumb:hover {
background-color: #bbb
}
code::-webkit-scrollbar-track-piece {}
code::-webkit-scrollbar {
width: 6px;
height: 6px
}
code::-webkit-scrollbar-thumb {
border-radius: 6px;
background-color: #777
}
code::-webkit-scrollbar-thumb:hover {
background-color: #bbb
}
html::-webkit-scrollbar-track-piece {
background: #eee
}
html::-webkit-scrollbar {
width: 8px;
height: 6px
}
html::-webkit-scrollbar-thumb {
border-radius: 4px;
background-color: #cbcbcb
}
html::-webkit-scrollbar-thumb:hover {
background-color: #bbb
}
/* 代码样式-End */
// 代码自动注明行数-Start
(function () {
var pres = document.querySelectorAll('pre');
var lineNumberClassName = 'line-numbers';
pres.forEach(function (item, index) {
item.className = item.className == '' ? lineNumberClassName : item.className + ' ' + lineNumberClassName;
});
})();
// 代码自动注明行数-End
// 文章Markdown模式下`>`样式修复-Start
var blockquotes = document.querySelectorAll('.markdown-body blockquote');
blockquotes.forEach(function (blockquote) {
var content = blockquote.innerHTML;
var wrappedContent = '<p>' + content + '</p>';
blockquote.innerHTML = wrappedContent;
});
// 文章Markdown模式下`>`样式修复-End
想想你的文章写的特别好www.jiwenlaw.com
怎么收藏这篇文章?
不错不错,我喜欢看
博主真是太厉害了!!!