diff --git a/README.md b/README.md index bc63fad..db1b6fe 100755 --- a/README.md +++ b/README.md @@ -1,35 +1,77 @@ -# cnblogs-theme-next -next-theme博客园主题,使用论文格式设计，专注阅读体验 +#
e x T
+ +# [cnblogs-theme-next](https://github.com/MakerGYT/cnblogs-theme-next) +将hexo 经典的next-theme主题迁移至博客园,使用论文格式设计，专注阅读体验,极简主义设计 ## 特性 - 高度还原[next-theme](https://theme-next.js.org/) - 响应式设计 -- 支持目录 -- 论文规范排版 +- 支持目录、阅读进度 +- 论文规范排版、衬线字体 - 与博客园既有特性融合 +- 代码高亮选用github风格 +- 优化评论区、上下文切换 ## 预览 ### 截图 -![](https://static01.imgkr.com/temp/8afda14ed79b4a6393fd07026520c96e.gif) +![](https://imgkr.cn-bj.ufileos.com/a3af8dc0-31a0-4cfb-a726-004d6fd13332.gif) ![](https://static01.imgkr.com/temp/4e9579bc084e4740873687ef112722f5.gif) ### 样例 -[我的博客](https://www.cnblogs.com/makergyt) +[博客园](https://www.cnblogs.com/makergyt/p/13220468.html) <=> [hexo](https://blog.makergyt.com/) + +## 选型 +### 为什么选择博客园 +- 经常使用搜索引擎查找某些问题会发现博客园有着良好的SEO,相比自主建站或者其他静态站点方式，省去了SEO优化和推送，便于更好的呈现和分享。 +- 博客园用户大多是早期开发者，内容可信度高。由于没有其他平台类似的激励计划(比如X币)，写文章出发点很纯粹，也就不会存在用一两句话凑一篇文章、凑一篇原创（比如CSDN）,即便存在也往往就是标准答案。 +- 搜索结果比较真实，不像CSDN，通过**在大量相干不相干的广告和文章链接中夹带着文章**，导致可能搜索概要中含关键词但是打开文章却毫无干系，迫使在其环境下跳来跳去增加点击率和广告曝光率，却永远找不到答案。 +- 免备案,免服务器,https,自动二级域名(xxx.cnblogs.com) +- 支持标准markdown，渲染准确，可完美迁移。图片不会像其他平台一样强制转内链，但还往往转不成功需要找原图再上传。 +- **重要**:支持高度自定义，jquery于网页的意义就好比ssh的22端口于服务器的意义。不像~~CSDN~~，只能换头图和底图，还得开会员. + +### 为什么选择next-theme(Pisces) +- 真正大道至简。很多主题标榜极简、专注阅读，但往往花样繁多。 +- 可配置、可自定义、可扩展。 ## 使用 打开[后台](https://i.cnblogs.com/settings) -1. 选择博客皮肤为custom,勾选禁用模板css -2. 将三个文件内容分别复制入相应区域(页首、页尾、定制css) +1. 选择博客皮肤为custom,勾选禁用模板css,申请js权限 +2. 将[三个文件](https://github.com/MakerGYT/cnblogs-theme-next/find/master)内容分别复制入相应区域(页首、页尾、定制css) 3. 在[选项中](https://i.cnblogs.com/preference)勾选**首页仅列出标题与摘要**,控件显示勾选**公告** -4. 通过[随笔](https://i.cnblogs.com/posts)写文章，填写摘要和标签后发布。 -5. (可选),由于无法在首页获取头像，如需正常显示，手动在`foot.html`头部配置`avatar`;其他可配置部分如下 +4. 通过[随笔](https://i.cnblogs.com/posts)写文章，填写**摘要**和**标签**后发布。 +5. (可选),由于无法在首页获取头像，如需正常显示，手动在`foot.html`头部配置`avatar`(可在[头像设置](https://account.cnblogs.com/settings/account/avatar)上传后右键头像获取链接) +其他可配置部分如下 - github:右上角跳转github用户名,默认为本仓库链接 - author:作者，默认取后台设置 - - siteTitle:网站标题默认取后台设置标题 + - siteTitle:网站标题默认取后台设置 + - gallery: 要展示的相册ID(新建相册后在url中获取ID，如`1796566`) +### 配置主题色 +```css +/*custom.css*/ +:root { + --primary-color:#027AFF;/* 全局主色*/ + --body-bg-color: #f5f7f9; /*页面背景色*/ + --content-bg-color: #fff; /*页面内容背景色*/ + --heading-color: rgba(0, 0, 0, 0.85); /* 标题色 */ + --text-color: #353535; /*主文本色*/ + --text-color-secondary:rgba(0, 0, 0, 0.45);/*次文本色*/ + --text-color-grey:rgba(0, 0, 0, 0.25); /*失效色，无需关注色*/ + --link-color: #555; /*链接色*/ + --code-bg-color:#f0f0f0; /*代码块背景色*/ +} +``` +可通过devtools调试来选择 +![通过devtools调试来选择](https://static01.imgkr.com/temp/70ca34797054440395ffa98e2db628b7.gif) ## 开发 -原则 +### 原则 - 能通过脚本获取的信息，如用户已经在管理后台设置的信息，就无需再次配置 - 不应该完全自定义而脱离博客园设置，比如个人信息应该以默认设置为主,尽可能作为补充而不冲突 - 专注于阅读体验而非花里胡哨 -- 不必苛求完全与next原主题一致，毕竟该主题也一般需要改动，适合、可用即可。 \ No newline at end of file +- 不必苛求完全与next原主题一致，毕竟该主题也一般需要改动，适合、可用即可。 + +### Todo +- 优化配置方式 +- 显示代码行和复制 +- 修复可能存在的时序问题 +- 修复订阅(非导航区id="blog_nav_rss"无法绑定事件) \ No newline at end of file diff --git a/custom.css b/custom.css index 3d79543..0fefb96 100755 --- a/custom.css +++ b/custom.css @@ -1,10 +1,16 @@ -/*可配置颜色*/ +/** + * @author:me@makergyt.com + * @version:2020-07-01 + */ :root { - --primary-color:#027AFF; - --body-bg-color: #f5f7f9; - --content-bg-color: #fff; - --text-color: rgba(0,0,0,0.65); - --link-color: #555; - --code-bg-color:#f0f0f0; + --primary-color:#027AFF;/* 全局主色*/ + --body-bg-color: #f5f7f9; /*页面背景色*/ + --content-bg-color: #fff; /*页面内容背景色*/ + --heading-color: rgba(0, 0, 0, 0.85); /* 标题色 */ + --text-color: #353535; /*主文本色*/ + --text-color-secondary:rgba(0, 0, 0, 0.45);/*次文本色*/ + --text-color-grey:rgba(0, 0, 0, 0.25); /*失效色，无需关注色*/ + --link-color: #555; /*链接色*/ + --code-bg-color:#f0f0f0; /*代码块背景色*/ } -.header { margin: 0 auto; position: relative; width: calc(100% - 20px); } body { margin: 0; background:var(--body-bg-color); color: var(--text-color); line-height: 2; } a { color: var(--link-color); text-decoration:none; } #main { align-items: flex-start; display: flex; justify-content: space-between; flex-direction: row-reverse; margin: 0 auto; width: calc(100% - 20px); } #page_begin_html { margin: 0 auto; position: relative; } .header-inner { background: #fff; border-radius: initial; box-shadow: initial; overflow: hidden; padding: 0; position: absolute; top: 0; width: 240px; margin: 0 auto; } .site-brand-container { background: var(--primary-color); display: flex; flex-shrink: 0; padding: 0 10px; } .site-meta { padding: 20px 0; flex-grow: 1; text-align: center; } .brand { color: #fff; display: inline-block; padding: 0 40px; position: relative; } .site-title { font-family: 'Times New Roman',sans-serif; font-size: 1.375em; font-weight: 400; margin: 0; line-height: 1.5; } .menu { margin-top: 20px; padding-left: 0; } .menu .menu-item { display: block; margin: 0; list-style: none; } .search-wrap { display: inline-block; background-color: var(--code-bg-color); border-radius: 20px; padding: 0 10px; } .input_my_zzk { width: 140px; vertical-align: middle; background-color: var(--code-bg-color); height: 30px; border: none; outline: none } .site-nav-right, .site-nav-toggle { display: none; } .site-nav-right .toggle, .site-nav-toggle .toggle { padding: 10px; width: 22px; color: #fff; } .site-nav-right .toggle a .fa{ color: #fff; } .toggle { line-height: 0; } .site-nav-right .toggle .toggle-line, .site-nav-toggle .toggle .toggle-line { background: #fff; border-radius: 1px; } .toggle.toggle-close .toggle-line-first { transform: rotate(-45deg); top: 5px; } .toggle.toggle-close .toggle-line-middle { opacity: 0; } .toggle.toggle-close .toggle-line-last { transform: rotate(45deg); top: -5px; } .toggle .toggle-line { display: inline-block; height: 2px; left: 0; position: relative; top: 0; transition: all .4s; vertical-align: top; width: 100%; } .toggle .toggle-line:not(:first-child) { margin-top: 3px; } .site-nav.site-nav-on { display: block; } .site-nav .menu-item-active { border-right: 3px solid var(--primary-color); background: var(--body-bg-color); } .site-nav .menu-item .menu-item-inner { color: #555; font-size: 16px; padding: 5px 20px; position: relative; text-align: left; display: block; line-height: 2; } .site-nav .menu-item .menu-item-inner .fa { color: #69c0ff; margin-right: 8px; } #sideBar { margin-top: 300px; position: static; width: 240px; background: #fff; margin-right: 12px; /*?*/ } .affix { position: fixed; top: 0; } #post-toc-wrap { background: var(--content-bg-color); width: 240px; } #post-toc-wrap ol{ font-size: 14px; line-height: 1.8; list-style: none;padding: 0 2px 5px 10px; } #author_profile_detail { margin-left: 10px; font-size: 14px; color: var(--link-color); } .author_avatar, .site-author-image { border-radius: 50%; } .site-author-image { border: 1px solid #eee; display: block; margin: 20px auto 0; max-width: 80px; padding: 2px; } .site-author-name { color: var(--text-color); font-weight: 600; margin: 10px 0 0; text-align: center; } .site-state { margin: 10px auto; text-align: center; color: var(--text-color); } #mainContent { background: var(--content-bg-color); box-sizing: border-box; padding: 40px; width: calc(100% - 252px); } .forFlow { padding-top: 20px; } .day { margin-bottom: 60px; } .dayTitle { display: none; } .postTitle { font-size: 27px; font-weight: 400; line-height: 1.5; text-align: center; word-wrap: break-word; color: var(--link-color); } .postCon { font-family: 'Noto Serif SC','Times New Roman',"PingFang SC","Microsoft YaHei",sans-serif; word-wrap: break-word; margin: .5em 0; } .c_b_p_desc_readmore { color: var(--primary-color); } .c_b_p_desc { line-height: 2; } .postDesc { text-align: right; font-style: italic; font-size: 14px; color: #bbbbbb; } #cnblogs_post_description { font-family: 'Noto Serif SC','Times New Roman',"PingFang SC","Microsoft YaHei",sans-serif; color: var(--text-color); } #post-description-meta { line-height: 4; text-align: center; font-size: 18.667px; font-weight: 500; color: rgba(0,0,0,.85); font-family: SimHei,'Times New Roman',"PingFang SC","Microsoft YaHei",sans-serif; } #post-keyword { color: var(--text-color); font-family: 'Times New Roman',"PingFang SC","Microsoft YaHei",sans-serif; } #post-keyword a { font-family: 'Noto Serif SC','Times New Roman',"PingFang SC","Microsoft YaHei",sans-serif; } #cnblogs_post_body p{ font-family: 'Noto Serif SC','Times New Roman',"PingFang SC","Microsoft YaHei",sans-serif; } #cnblogs_post_body h3 { padding-top: 10px; font-size: 18.667px; font-weight: 500; color: rgba(0,0,0,.85); font-family: SimHei,'Times New Roman',"PingFang SC","Microsoft YaHei",sans-serif; } #cnblogs_post_body h4,#cnblogs_post_body h5,#cnblogs_post_body h6 { padding-top: 10px; font-size: 16px; font-weight: 500; color: rgba(0,0,0,.85); font-family: SimHei,'Times New Roman',"PingFang SC","Microsoft YaHei",sans-serif; } #cnblogs_post_body h2 { padding-top: 10px; text-align: center; font-size: 21.333px; margin: 1em auto; font-weight: 500; line-height: 2em; color: rgba(0,0,0,.85); } .postBody blockquote { border:none; border-left: 4px solid #ddd; color: #666; margin: 0; padding: 0 15px; } .postBody p > a { text-decoration: underline; } #cnblogs_post_body table { border-collapse: collapse; border-spacing: 0; font-size: .875em; margin: 0 auto; max-width: 100%; width: auto; border:none; border-top: 2px solid #222; border-bottom: 2px solid #222; } #cnblogs_post_body table thead { border-bottom: 1px solid #999; } #cnblogs_post_body table tr { overflow-x: auto; overflow-y: hidden; text-align: justify; word-break: keep-all; white-space: nowrap; } #cnblogs_post_body table td, #cnblogs_post_body table th { padding: 4px 8px; width: 150px; border: none; } .cnblogs-markdown code { background-color: var(--code-bg-color) !important; border: none !important; } .cnblogs-markdown .hljs { font-size: 14px !important; padding: 10px !important; } #cnblogs_post_body img { display: block; margin: 0 auto; } .footnotes-meta { margin: 2em 0 0 0; } .github-corner svg { border: 0; color: #fff; fill: var(--primary-color); position: absolute; right: 0; top: 0; z-index: 1000; } .github-corner:hover .octo-arm { animation: octocat-wave 560ms ease-in-out; } @keyframes octocat-wave { 0%, 100% { transform: rotate(0); } 20%, 60% { transform: rotate(-25deg); } 40%, 80% { transform: rotate(10deg); } } .comment_textarea{ padding: 15px; border-radius: 10px; outline: 0; resize: none; overflow: hidden; width: 100%; } #footer { color: #999; font-size: .875em; line-height: 28px; padding-left: 260px; box-sizing: border-box; margin: 0 auto; text-align: center; width: calc(100% - 20px); } #header,.catListTitle,#profile_block, #under_post_news, #ad_t2, .c_ad_block, #under_post_kb, #comment_nav { display: none; } /* Responsive design*/ @media (min-width: 1600px) { #main,.header { width: 73%; } } @media (min-width: 1200px) { #main, .header { width: 1160px; } .header-inner { width: 240px; } } @media (max-width: 991px) { .header, .header-inner, .main-inner, #footer { width: auto; } .header-inner { border-radius: initial; position: relative; } #sideBar, #post-toc-wrap, .github-corner { display: none; } #mainContent { border-radius: initial; padding: 20px; width: 100%; } .site-brand-container { box-shadow: 0 0 16px rgba(50,132,191,.9); } #footer { padding-left: 0; padding-right: 0; } } @media (max-width: 991px) and (min-width: 768px) { .site-nav-right, .site-nav-toggle { display: flex; flex-direction: column; justify-content: center; } .site-nav { display: none; } } @media (max-width: 767px) { .site-nav { clear: both; display: none; } .site-nav-right, .site-nav-toggle { display:flex; flex-direction:column; justify-content:center } } \ No newline at end of file +.header { margin:0 auto; position:relative; width:calc(100% - 20px); } body { margin:0; background:var(--body-bg-color); color:var(--text-color); line-height:2; } a { color:var(--link-color); text-decoration:none; } #main { align-items:flex-start; display:flex; justify-content:space-between; flex-direction:row-reverse; margin:0 auto; width:calc(100% - 20px); } #page_begin_html { margin:0 auto; position:relative; } .header-inner { background:#fff; border-radius:initial; box-shadow:initial; overflow:hidden; padding:0; position:absolute; top:0; width:240px; margin:0 auto; } .site-brand-container { background:var(--primary-color); display:flex; flex-shrink:0; padding:0 10px; } .site-meta { padding:20px 0; flex-grow:1; text-align:center; } .brand { color:#fff; display:inline-block; padding:0 40px; position:relative; } .site-title { font-family:'Times New Roman',sans-serif; font-size:1.375em; font-weight:400; margin:0; line-height:1.5; } .menu { margin-top:20px; padding-left:0; } .menu .menu-item { display:block; margin:0; list-style:none; } .search-wrap { display:inline-block; background-color:var(--code-bg-color); border-radius:20px; padding:0 10px; } .input_my_zzk { width:140px; vertical-align:middle; background-color:var(--code-bg-color); height:30px; border:none; outline:none } .site-nav-right,.site-nav-toggle { display:none; } .site-nav-right .toggle,.site-nav-toggle .toggle { padding:10px; width:22px; color:#fff; } .site-nav-right .toggle a .fa { color:#fff; } .toggle { line-height:0; } .site-nav-right .toggle .toggle-line,.site-nav-toggle .toggle .toggle-line { background:#fff; border-radius:1px; } .toggle.toggle-close .toggle-line-first { transform:rotate(-45deg); top:5px; } .toggle.toggle-close .toggle-line-middle { opacity:0; } .toggle.toggle-close .toggle-line-last { transform:rotate(45deg); top:-5px; } .toggle .toggle-line { display:inline-block; height:2px; left:0; position:relative; top:0; transition:all .4s; vertical-align:top; width:100%; } .toggle .toggle-line:not(:first-child) { margin-top:3px; } .site-nav.site-nav-on { display:block; } .site-nav .menu-item-active { border-right:3px solid var(--primary-color); background:var(--body-bg-color); } .site-nav .menu-item .menu-item-inner { color:#555; font-size:16px; padding:5px 20px; position:relative; text-align:left; display:block; line-height:2; } .site-nav .menu-item .menu-item-inner .fa { color:#69c0ff; margin-right:8px; } #sideBar { margin-top:300px; position:static; width:240px; background:#fff; margin-right:12px; /*?*/ } .affix { position:fixed; top:0; } #post-toc-wrap { background:var(--content-bg-color); width:240px; } #post-toc-wrap ol { font-size:14px; line-height:1.8; list-style:none; padding:0 2px 5px 10px; } .back-to-top { background: var(--body-bg-color); margin: 0 auto; cursor: pointer; text-align: center; font-size: 12px; color: var(--text-color); } #author_profile_detail { margin-left:10px; font-size:14px; } #author_profile_detail a { color:var(--text-color-secondary); } .author_avatar,.site-author-image { border-radius:50%; } .site-author-image { border:1px solid #eee; display:block; margin:20px auto 0; max-width:80px; padding:2px; } .site-author-name { color:var(--text-color); font-weight:600; margin:10px 0 0; text-align:center; } .site-state { margin:10px auto; text-align:center; color:var(--text-color); } .links-of-author { display: flex; flex-wrap: wrap; margin-top: 10px; justify-content: center; } .links-of-author-item { margin: 5px 0 0; } .links-of-author a{ font-size: 16px; padding: 0 5px; } .links-of-author a .fa-envelope { color: #e4b56b; } .links-of-author a .fa-rss { color: #fa541c; } #mainContent { background:var(--content-bg-color); box-sizing:border-box; padding:40px; width:calc(100% - 252px); } .forFlow { padding-top:20px; } .day { margin-bottom:60px; } .dayTitle { display:none; } .postTitle { font-size:27px; font-weight:400; line-height:1.5; text-align:center; word-wrap:break-word; color:var(--link-color); } .postCon { font-family:'Noto Serif SC','Times New Roman',"PingFang SC","Microsoft YaHei",sans-serif; word-wrap:break-word; margin:.5em 0; } .c_b_p_desc_readmore { color:var(--primary-color); } .c_b_p_desc { line-height:2; } .postDesc { text-align:right; font-style:italic; font-size:14px; color:var(--text-color-grey); } .postDesc a { color:var(--text-color-grey); } #cnblogs_post_description { font-family:'Noto Serif SC','Times New Roman',"PingFang SC","Microsoft YaHei",sans-serif; color:var(--text-color); } #post-description-meta { line-height:4; text-align:center; font-size:18.667px; font-weight:500; color:var(--heading-color); font-family:SimHei,'Times New Roman',"PingFang SC","Microsoft YaHei",sans-serif; } #post-keyword { color:var(--text-color); font-family:'Times New Roman',"PingFang SC","Microsoft YaHei",sans-serif; } #post-keyword a { font-family:'Noto Serif SC','Times New Roman',"PingFang SC","Microsoft YaHei",sans-serif; } #cnblogs_post_body p { font-family:'Noto Serif SC','Times New Roman',"PingFang SC","Microsoft YaHei",sans-serif; } #cnblogs_post_body h3 { padding-top:10px; font-size:18.667px; font-weight:500; color:var(--heading-color); font-family:SimHei,'Times New Roman',"PingFang SC","Microsoft YaHei",sans-serif; } #cnblogs_post_body h4,#cnblogs_post_body h5,#cnblogs_post_body h6 { padding-top:10px; font-size:16px; font-weight:500; color:var(--heading-color); font-family:SimHei,'Times New Roman',"PingFang SC","Microsoft YaHei",sans-serif; } #cnblogs_post_body h2 { padding-top:10px; text-align:center; font-size:21.333px; margin:1em auto; font-weight:500; line-height:2em; color:var(--heading-color); } .postBody blockquote { border:none; border-left:4px solid #ddd; color:var(--text-color-secondary); margin:0; padding:0 15px; } .postBody p > a { text-decoration:underline; } #cnblogs_post_body table { border-collapse:collapse; border-spacing:0; font-size:.875em; margin:0 auto; max-width:100%; width:auto; border:none; border-top:2px solid #222; border-bottom:2px solid #222; } #cnblogs_post_body table thead { border-bottom:1px solid #999; } #cnblogs_post_body table tr { overflow-x: scroll; overflow-y:hidden; text-align:justify; word-break:keep-all; } #cnblogs_post_body table td,#cnblogs_post_body table th { padding:4px 8px; width:150px; border:none; } .cnblogs-markdown code { background-color:var(--code-bg-color) !important; border:none !important; font-weight: 300; } .cnblogs-markdown .hljs { font-size:14px !important; padding:10px !important; } #cnblogs_post_body img { display:block; margin:0 auto; } .footnotes-meta { margin:2em 0 0 0; } .github-corner svg { border:0; color:#fff; fill:var(--primary-color); position:absolute; right:0; top:0; z-index:1000; } .github-corner:hover .octo-arm { animation:octocat-wave 560ms ease-in-out; } @keyframes octocat-wave { 0%,100% { transform:rotate(0); } 20%,60% { transform:rotate(-25deg); } 40%,80% { transform:rotate(10deg); } } /*share*/ #div_digg{ filter: grayscale(); margin-right: 0; margin-top: 0; } #blog_post_info { display: flex; justify-content: space-between; } #author_profile { width:auto; } #green_channel { display: none; } /*pre-next*/ .post_next_prev { line-height: 1.5; display: flex; justify-content: space-between; border-top: 1px solid #e8e8e8; border-bottom: 1px solid #e8e8e8; } .post_next_prev >div { width: 50%; padding: 0 12px; } .next-block,.next a { text-align: right; } .pre-block a,.next-block a { display: inline-block; padding: 32px 0; } .post_next_prev_label { margin-bottom: 8px; font-size: 14px; color: var(--text-color-grey); } /*comment*/ .comment_textarea { padding:15px; border-radius:10px; outline:0; resize:none; overflow:hidden; width:100%; } .feedback_area_title, #commentform_title { font-size: 14px; line-height: 32px; color: var(--text-color-secondary); padding: 10px 0; background: none; } .feedbackItem { position: relative; padding: 16px 0 16px 60px; font-size:14px; } .feedbackAvatar { position: absolute; left: 1px; } .feedbackAvatar img { border-radius: 50%; width:40px; height: 40px; } .feedbackManage { text-align: right; float: right; } .feedbackManage a, .comment_vote a { color: var(--text-color-secondary); } .layer { display: none; } [id^=a_comment_author_] { float: left; } .louzhu { background-color: var(--primary-color); color: #fff; line-height: 28px; padding: 3px; border-radius: 3px; } .comment_date { color: var(--text-color-grey); font-size: 12px; padding-left: 16px; } .commentbox_tab { margin-right: 0; padding: 8px 16px; font-size: 14px; line-height: 23px; color: var(--text-color-secondary); border: 1px solid var(); border-bottom: 0; } .commentbox_tab:hover, .commentbox_tab.active { color: var(--text-color); border-bottom: none; } .commentbox_tab.active { border-radius: 6px 6px 0 0; border: 1px solid #e1e4e8; border-bottom: none; } div.commentform textarea, #tbCommentBodyPreview { min-height: 250px; padding: 8px 0; } #commentbox_opt { text-align: right; } #commentbox_opt>a,#btn_comment_submit, #span_comment_canceledit{ width:auto; height: 34px; color: var(--text-color-secondary); padding: 5px 16px; font-size: 14px; line-height: 20px; } #btn_comment_submit { background-color: var(--primary-color); color: #fff; border-radius: 6px; border:1px solid rgba(27,31,35,.15); } #comment_form_container p { color: var(--text-color-secondary); } #footer { color:var(--text-color-grey); font-size:.875em; line-height:28px; padding-left:260px; box-sizing:border-box; margin:0 auto; text-align:center; width:calc(100% - 20px); } #header,.catListTitle,#profile_block,#under_post_news,#ad_t2,.c_ad_block,#under_post_kb,#comment_nav { display:none; } /*mypost*/ #myposts .PostList { font-size: 18.667px; color: var(--heading-color); line-height: 2; } #myposts .postDesc2 { font-size: 14px; color: var(--text-color-secondary); text-align: right; } /* Responsive design*/ @media (min-width:1600px) { #main,.header { width:73%; } } @media (min-width:1200px) { #main,.header { width:1160px; } .header-inner { width:240px; } } @media (max-width:991px) { .header,.header-inner,.main-inner,#footer { width:auto; } .header-inner { border-radius:initial; position:relative; } #sideBar,#post-toc-wrap,.github-corner { display:none; } #mainContent { border-radius:initial; padding:16px; width:100%; } .site-brand-container { box-shadow:0 0 16px rgba(50,132,191,.9); } #footer { padding-left:0; padding-right:0; } } @media (max-width:991px) and (min-width:768px) { .site-nav-right,.site-nav-toggle { display:flex; flex-direction:column; justify-content:center; } .site-nav { display:none; } } @media (max-width:767px) { .site-nav { clear:both; display:none; } .site-nav-right,.site-nav-toggle { display:flex; flex-direction:column; justify-content:center } .feedbackAvatar img { width:32px; height: 32px; } .feedbackItem { padding-left: 40px; } .commentform { margin-left: 0; } } \ No newline at end of file diff --git a/foot.html b/foot.html index 149200a..7fd4ab9 100755 --- a/foot.html +++ b/foot.html @@ -1,169 +1,254 @@ - + + href="https://fonts.googleapis.com/css2?family=Noto Serif SC:wght@400;500;700&display=swap&subset=latin,latin-ext"> + + + + \ No newline at end of file diff --git a/head.html b/head.html index f2aef52..f477849 100755 --- a/head.html +++ b/head.html @@ -1,3 +1,5 @@ + +

博客园

  • 首页
    • -
  • 联系
    • -
  • -
    订阅
    -
    • +
  • 归档
    • +