Cirry's Blog

hexo(5)maupassant主题扩展功能

Sep 3, 2022
技术 hexo
6分钟
1127字

添加底部badge

首先为项目中添加更多颜色样式类，会后面定制化页面样式准备。

在themes/maupassant/source/css/style.scss中的头部添加颜色样式如下：

$theme-colors: (
        "golden-sand": #eccc68,
        "coral": #ff7f50,
        "wild-watermelon":#ff6b81,
        "peace":#a4b0be,
        "grisaille":#57606f,
        "Orange":#ffa502,
        "bruschetta-tomato":#ff6348,
        "watermelon":#ff4757,
        "bay-wharf":#747d8c,
        "prestige-blue":#2f3542,
        "lime-soap":#7bed9f,
        "french-sky-blue":#70a1ff,
        "saturated-sky":#5352ed,
        "white":#ffffff,
13 collapsed lines
        "city-lights":#dfe4ea,
        "ufo-green":#2ed573,
        "clear-chill":#1e90ff,
        "bright-greek":#3742fa,
        "anti-flash-white":#f1f2f6,
        "twinkle-blue":#ced6e0,
);


@each $name, $color in $theme-colors {
    .color-#{$name} {
        background-color: $color;
    }
}

这里的颜色主题我是在flatuicolors找的，你也可以随意更换为你喜欢的颜色主题。

在themes/maupassant/source/css/style.scss的尾部添加badge样式，代码如下:

.footer-remark {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}


.github-badge {
    border-radius: 4px;
    text-shadow: none;
    font-size: 12px;
    color: #fff;
    line-height: 1.25;
    margin: 6px;
    display: flex;
20 collapsed lines


    a {
        color: #fff;
    }


    .badge-subject {
        display: inline-block;
        background-color: #555;
        padding: 4px 4px 4px 6px;
        border-top-left-radius: 4px;
        border-bottom-left-radius: 4px;
    }


    .badge-value {
        display: inline-block;
        padding: 4px 6px 4px 4px;
        border-top-right-radius: 4px;
        border-bottom-right-radius: 4px;
    }
}

在themes/maupassant/layout/_partial/footer.pug的代码，全部替换为下面代码：

div#footer
    div
        span Copyright
        |
        |
        span(class="fa fa-copyright") 2022
        |
        |
        a(href=url_for('.'), rel='nofollow')= config.title
        |
        a(rel='nofollow', target='_blank', href='https://beian.miit.gov.cn/') |  你自己的备案号
        |
    div(class="footer-remark")
        div(class="github-badge")
            a(href="https:hexo.io", rel='nofollow')
13 collapsed lines
                span(class="badge-subject") Powered by
                span(class="badge-value color-clear-chill") Hexo
        div(class="github-badge")
            a(href="https:hexo.io", rel='nofollow')
                span(class="badge-subject") Theme
                span(class="badge-value color-ufo-green") Maupassant
        div(class="github-badge")
            span(class="badge-subject") 总访问量
            span(class="badge-value color-watermelon" id="busuanzi_value_site_pv")
        div(class="github-badge")
            span(class="badge-subject") 总访问人数
            span(class="badge-value color-coral" id="busuanzi_value_site_uv")
        div(class="github-badge")

首页不展示不蒜子计数问题

在我们配置完上面内容之后并部署到服务器上之后，我们会发现，每一篇博文的计数都已经正常显示，但是首页的计数却获取不到，这是因为首页没有加载不蒜子插件的原因。

在themes/maupassant/layout/_partial/head.pug文件中，添加如下代码：

script(src='https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js')

修改默认显示宽度

同样还是在themes/maupassant/source/css/style.scss中修改如下代码：

现在显示器已经越来越大，而且大多是电脑用户，可以适当调大页面显示区域。

.body_container {
    padding: 0 60px;
    max-width: 1440px;   /* 由1150px 调整为了 1440px */
    margin: 0 auto;
}

添加置顶样式

hexo中自带了文章置顶功能，只要在文元信息中设置sticky: 1000即可，其中数值越大级别越高。

当时设置完成了之后查看样式，管理员和访客都无法区分普通文章与置顶文章，因为他们的样式上一模一样。

所以接下来，我们在themes/maupassant/source/css/style.scss文件中的.post .post-title下给置顶文章添加一些样式。

.top-post {
    font-weight: 400;
    height: 32px;
    padding: 0 6px;
    margin-right: 5px;
    line-height: 32px;
    font-size: 16px;
    white-space: nowrap;
    vertical-align: 2px;
    color: #fff;
    background-image: -webkit-linear-gradient(0deg, #3742fa 0, #a86af9  100%);
    border-radius: 2px 6px;
}

具体位置如下图所示：

default

在themes/maupassant/layout/index.pug中修改一下标题，添加两行代码即可：

block content
  for post in page.posts.toArray()
    .post
      h1.post-title
        if post.sticky
            span(class="top-post")  置顶
        include _partial/helpers.pug
        a(href=url_for(post.path))
          +title(post)

修改网页字体

每个程序员可能都折腾多代码主题，其中字体也是大家各有偏爱，有的喜欢苹果的source code pro，有的喜欢monospace，或者是微软雅黑，而我比较钟爱jetbrains-mono，接下来就把页面的字体改一下吧。

  1. 去官网下载字体Jetbrains Mono。
  2. 解压将字体文件JetBrainsMono-Regular.ttf放入到themes/maupassant/source/css文件夹中。
  3. 在themes/maupassant/source/css/style.scss中的添加如下代码：
@font-face {
    font-family: "jetbrains-mono";  //自定义字体名称
    src: url('./JetBrainsMono-Regular.ttf'); //你的字体包路径
}
  1. 在style.scss中全局搜索font-family属性，在所以属性之前加入自定义字体，代码如下：
body {
    background-color: #FFF;
    color: #444;
    font-family: "jetbrains-mono", SimSun, sans-serif; /* 修改这里 */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: 14px;
}

这里注意，类似下面的样式不要修改，font-family和content同时出现的不要修改font-family属性，这个是字体文件。

&:before {
    font-family: "FontAwesome";
    content: "\f073";
    padding-right: 0.3em;
}

发现问题：我们看看页面，发现所有的页面都已经是我们想要的字体了，但是代码块中的字体却没有生效。

解决方案：

  1. 在_config.maupassant.yml中找到属性external_css设置为true。
  2. 创建source/css文件夹，并在此文件夹下，创建external.css文件。
  3. 在external.css文件中，新增如下代码：
code[class*="language-"],
pre[class*="language-"] {
    font-family: "jetbrains-mono", sans-serif;
}

清除缓存hexo cl，重新生成文件hexo g，重跑服务hexo s，即可看到样式正常啦。

添加广告区域

虽然广告有点烦人，但是我觉得好的广告是可以让人觉得有用的。

  1. 在_config.maupassant.yml中的widgets属性中，找一个合适的位置插入ad，代码如下：
widgets: ## Seven widgets in sidebar provided: search, info, category, tag, ad, recent_posts, recent_comments and links.
  - search
  - info
  - category
  - tag
  - ad
  - recent_posts
  - recent_comments
  - links
  1. 创建页面themes/maupassant/layout/_widget/ad.pug，加入代码如下：
.widget
  .widget-title
    i.fa.fa-bell-o= ' 广告'
  div(style="margin:3px 0;")
    a(href="https://www.aliyun.com/minisite/goods?userCode=ktv3zgyc")  # 替换为你自己的跳转连接
      img.nofancybox(src="https://cirry.cn/img/aliyun-cloud.jpg" style="width:100%;") #  src修改为你自己想要展示的图片路径
  1. 将你的图片放在themes/maupassant/source/img下即可。
hexo(6)maupassant主题问题汇总
hexo(4)安装评论功能
本文标题：hexo(5)maupassant主题扩展功能
文章作者：Cirry
发布时间：Sep 3, 2022
感谢大佬送来的咖啡☕
alipay
wechat
paypal
alipayQRCode
wechatQRCode
总访问量次
总访客数人次
Copyright 2026
皖ICP备2021006427号-1
站点地图