可搜索,可注册,可登录,致敬逗比大佬!尽在救援版逗比根据地 dbgjd.com
投稿文章 | 广告合作 | Telegram 群组 / 公告频道 / 使用教程

Hexo 搬迁记(三) 主题篇

News mlone11978 49℃ 0评论

在之前挖坑的 Hexo 搬迁记系列一 安装篇 Hexo 搬迁记系列二 插件篇 中,我分别介绍了本博客所使用的平台和插件。这次的系列三就介绍本博客的主题。

本博客的主题基于 Hexo 默认主题 LandScape,在原主题的基础上做了一些修改,并增加了一些插件。

修改大致分为:布局(layout)、样式(styl)、插件(widget)三部分,插件部分已在前面的插件篇进行过介绍。本文介绍 布局样式 部分。

2017-12-26:今天收到了私戳,被夸了一句“博客好漂亮”,内心还是有点小开心的,虽然只是一点微小的工作。

布局(layout)

在 layout 上面,我改的东东大概有点多,并且我也不记得改了哪些了,所以先把能回忆起来的写出来。

文章目录

article.ejs 中,Hexo 提供了一个生成文章分级目录的 toc 函数,使用 <%- toc(post.content) %> 即可调用它。

<div class="article-catalogue">   <strong class="article-catalogue">文章目录</strong>   <%- toc(post.content, {list_number: false}) %> </div> 

文末版权声明

article.ejs 中引入一个 if (post.excerpt && !index) 的判断,满足条件就插入指定段。

<footer class="article-footer">  <% if (post.excerpt && !index){ %>    <strong class="article-outdate">本文可能过时失效,若需更新,请留言</strong>   <br/>    <strong class="article-copyright">本博客文章均为原创,转载请注明来源</strong>  <% } %>  <%- partial('post/tag') %> </footer> 

底部版权信息

footer.ejs 中引入以下:

<footer id="footer">   <% if (theme.sidebar === 'bottom'){ %>     <%- partial('_partial/sidebar') %>   <% } %>   <div class="outer">     <div id="footer-info" class="inner" align="left">       © 2017 - <a href="https://sometimesnaive.org/">南琴浪博客</a> - 京 ICP 备 15046286 号     </div>   </div> </footer> 

样式(styl)

布局定下来了,接下来就是页面样式(css)的问题了。

Follow Me

在前面的 插件篇 中,我提到过,我使用了 FontAwesome 来引入图标。在那篇文章中,我介绍了 layout 部分。这里继续介绍 css 的部分。

首先在 _variables.styl 中定义字体 FontAwesome

// FontAwesome font-icon = FontAwesome font-icon-path = "FontAwesome/fontawesome-webfont" font-icon-version = "4.0.3" 

然后在 style.styl 中定义字体的相关属性:

@font-face   font-family: FontAwesome   font-style: normal   font-weight: normal   src: url(font-icon-path + ".eot?v=#" + font-icon-version)   src: url(font-icon-path + ".eot?#iefix&v=#" + font-icon-version) format("embedded-opentype"),        url(font-icon-path + ".woff?v=#" + font-icon-version) format("woff"),        url(font-icon-path + ".ttf?v=#" + font-icon-version) format("truetype"),        url(font-icon-path + ".svg#fontawesomeregular?v=#" + font-icon-version) format("svg") 

再在 widget.styl 中定义 Follow Me 插件的样式,就完成了:

.social     text-align: center !important     font-size: 2.2em !important     line-height:1em !important     margin: auto    //块的大小      a      color:#50504f !important      text-decoration: none !important     .telegram:before         content: "/f2c6" !important         @extend $social-block     .telegram:hover         color:#333         cursor: pointer         background-color: color-background     .twitter:before         content: "/f081" !important         @extend $social-block     .twitter:hover         color:#333         cursor: pointer         background-color: color-background     .gplus:before         content: "/f0d4" !important         @extend $social-block     .gplus:hover         color:#333         cursor: pointer         background-color: color-background     .github:before         content: "/f092" !important         @extend $social-block     .github:hover         color:#333         cursor: pointer         background-color: color-background 

分类目录

widget.styl 中定义 分类目录 插件的样式:

.category     font-size: 15px     margin: auto    //块的大小     text-align: left 

友情链接

widget.styl 中定义 友情链接 插件的样式:

.friendlink     font-size: 15px     margin: auto    //块的大小     text-align: left 

评论系统

在前面的 插件篇 中,我提到过,本博客采用 gitment 作为评论系统。我对 gitment 的样式做了一些修改。

我修改了 gitment 默认的 default.css 样式,对以下部分进行了修改,然后将整个文件单独定义为一个 gitment.styl

// 这是 gitment 整体边框的效果 .gitment-render {   background: #fff;   margin: auto;    box-shadow: 1px 2px 3px #ddd;   border: 1px solid color-border;   border-radius: 5px; }  // 这是 gitment 内的默认字体 .gitment-container {   font-family: font-sans;   font-size: 15px;   line-height: 1.5em;   color: color-default;   word-wrap: break-word; }  // 引用块的颜色 .gitment-markdown blockquote {   padding: 0 1em;   color: #6a737d;   border-left: 0.25em solid #ffe4e1; }  // 其中 background-color 定义了 highlight 背景色 .gitment-markdown code {   padding: 0;   padding-top: 0.2em;   padding-bottom: 0.2em;   margin: 0;   font-size: 95%;   background-color: #ffe4e1;   border-radius: 0; } 

然后,将 gitment.styl 引入到 style.styl 中:

if sidebar   @import "_partial/sidebar"    @import "_partial/widget"    //我添加的 widget 样式   @import "_partial/gitment"  //我添加的 gitment 样式 

字体

_variables.styl 中找到字体的设定:

// Font // font-sans = "Helvetica Neue", "Helvetica", "Hiragino Sans GB", "Microsoft YaHei", "Source Han Sans CN", "WenQuanYi Micro Hei", Arial, sans-serif font-sans = sans-serif font-arial = Arial // font-serif = Georgia, "Times New Roman", serif font-serif = serif // font-mono = Menlo, "Source Code Pro", Monaco, Consolas, Consolas, monospace font-mono = Menlo  // Font Dimension font-size = 15px    // 字体大小 line-height = 1.5em line-height-title = 1.0em 

然后在 article.styl 中定义字体属性:

//字数计数插件 .article-wordcount   font-size: 15px   font-weight: bold   color: color-grey  //文章目录 .article-catalogue   font-size: 15px   //font-weight: bold   color: color-grey  //版权声明 .article-copyright   font-size: 15px   font-weight: bold   color: color-grey  //过时声明 .article-outdate   font-size: 15px   font-weight: bold   color: color-grey  .article-entry   //文章的标题样式   h1     font-size: 2em   h2     font-size: 1.6em    //标题大小     border-bottom: 1.5px #bbb solid;    //标题下划线   h3     font-size: 1.2em     //border-bottom: 1.4px #ccc solid;   ...   blockquote    //修改引用块样式     font-family: font-arial    //font-sans  //引用部分采用和正文(sans)不同的字体(arial)     font-size: 15px     margin: line-height 10px    //引用块的偏移量     text-align: left // 左对齐  // 文章下面的 Next/Previous 按钮 #article-nav   clearfix()   position: relative   @media mq-normal     margin: block-margin 0     &:before       absolute-center(8px)       content: ""       border-radius: 50%       background: color-grey //“下一篇/上一篇”功能的“圆点”的颜色       //box-shadow: 0 1px 2px #fff  .article-nav-link-wrap   text-decoration: none   text-shadow: 0 1px #fff   color: color-grey //“下一篇/上一篇”功能的“文章标题”的颜色   box-sizing: border-box   margin-top: block-margin   text-align: center   display: block   &:hover     color: color-default   @media mq-normal     width: 50%     margin-top: 0  .article-nav-caption   text-transform: uppercase   letter-spacing: 2px   color: color-grey //“下一篇/上一篇”功能的“Next/Previous”的颜色   line-height: 1em   //font-weight: bold    //字体加粗   #article-nav-newer &     margin-right: -2px 

代码高亮

highlight.styl 中修改了以下属性:

highlight-background = #ffe4e1    //代码高亮块的背景色 highlight-foreground = color-default    //代码块的字体颜色  $code-block   background: highlight-background   margin: auto    //代码块不左右顶格,而是与两侧保持一定间距  $line-numbers   color: highlight-foreground   font-size: 0em    //行号大小   letter-spacing: 0px    //字符或字母之间的间隔 

页面颜色

_variables.styl 中修改了以下属性:

// Colors color-default = #555 color-grey = #999 color-border = #ddd    //更改边框的颜色 color-link = #258fb8    //更改连接的颜色 color-background = #ffe4e1    //页面的背景颜色 color-sidebar-text = #777    //貌似当时修改的这个吧 //更改侧边栏链接的颜色 color-widget-background = #fff    //边栏插件的背景颜色 color-widget-border = #ddd    //边栏插件的边框颜色 color-footer-background = #ffe4e1    //页面底部的背景颜色 color-mobile-nav-background = #191919 color-twitter = #00aced color-facebook = #3b5998 color-pinterest = #cb2027 color-google = #dd4b39 

页面间距

_variables.styl 中修改了以下属性:

// Layout block-margin = 60px    //模块之间的间距 article-padding = 20px    // 文章内缩进 mobile-nav-width = 280px main-column = 12    //文章的宽度 sidebar-column = 4    //边栏插件的空行 

转载请注明:逗比根据地 » Hexo 搬迁记(三) 主题篇

喜欢 (0)
发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址