前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >hexo主题使用与修改

hexo主题使用与修改

作者头像
AnRFDev
发布2021-02-01 15:17:04
6900
发布2021-02-01 15:17:04
举报
文章被收录于专栏:AnRFDevAnRFDev

添加一个小图标

增加了一个更新日期类别: updated

style.scss 添加一个updated,使用FontAwesome

代码语言:javascript
复制
.post {
    padding: 25px 0 15px;
    .post-title {
        margin: 0;
        color: #555;
        text-align: left;
        font: bold 25px/1.1 "ff-tisa-web-pro", Cambria, "Times New Roman", Georgia, Times, sans-serif;
        a {
            color: #555;
        }
    }
    .post-meta {
        padding: 0;
        margin: 15px 0 0;
        color: #6E7173;
        float: left;
        display: inline;
        text-indent: .15em;
        &:before {
              font-family: "FontAwesome";
              content: "\f073";
              padding-right: 0.3em;
        }
        .category {
            &:before {
              font-family: "FontAwesome";
              content: "\f07c";
              padding-right: 0.3em;
            }
        }
        .updated {
            &:before {
                font-family: "FontAwesome";
                content: "\f044";
                padding-right: 0.3em;
              }
        }

post.pug 使用span,添加updated信息

代码语言:javascript
复制
block content
  .post
    h1.post-title= page.title
    .post-meta= page.date.format('ll')
      if page.categories.length > 0
        span= ' | '
        span.category
          for category in page.categories.toArray()
            a(href=url_for(category.path))= category.name
      if page.updated
        span= ' | ' 
        span.updated
          = page.updated.format('ll')

如果在markdown文件中不添加updated这个值,那么hexo会获取文件的修改日期,并渲染出来。

参考:

添加Google Adsense

head.pug中添加

代码语言:javascript
复制
script(src='https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js', async)
script.
  (adsbygoogle = window.adsbygoogle || []).push({
  google_ad_client: "ca-pub-7286632197002340",
  enable_page_level_ads: true
  });

添加侧边栏

添加一个微信公众号的侧边栏展示

主题layout/_widget中添加qr_code.pug

代码语言:javascript
复制
.widget
  .widget-title
    i(class='fa fa-weixin')= ' ' + __('微信公众号')
  img(src='http://rustblogres.rustfisher.com/qrcode_for_rf_dev_gzh_258.jpg')

_config.yml中添加 qr_code

代码语言:javascript
复制
widgets: 
  # 前面的组建
  - qr_code

更改归档界面的链接个数

在工程的配置文件_config.yml里修改

代码语言:javascript
复制
# Pagination
## Set per_page to 0 to disable pagination
pagination_dir: page
index_generator:
  per_page: 15
  order_by: -date

category_generator:
  per_page: 15

tag_generator:
  per_page: 10

archive_generator:
  per_page: 30
  yearly: true
  monthly: true
  daily: false

文章置顶及置顶标签

首先更换一下generator

代码语言:javascript
复制
$ npm uninstall hexo-generator-index --save
$ npm install hexo-generator-index-pin-top --save

再到themes/maupassant里,查找.post-meta,并且在下面添加top的判断。

代码语言:javascript
复制
.post-meta= post.date.format(config.date_format)
  if post.top
    span.post-top-icon
      i(class="fa fa-thumb-tack")
      span.post-meta-item-text=" 置顶"

在文章开头的Front-matter中加上top: true即可。

报错

大括号报错

md中出现形如 大括号大括号 的时候,编译会报错。

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2019-08-06,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 添加一个小图标
  • 添加Google Adsense
  • 添加侧边栏
  • 更改归档界面的链接个数
  • 文章置顶及置顶标签
  • 报错
    • 大括号报错
    领券
    问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档