hexo抄作业

hexo

一、界面美化

1.文章

在每篇文章后添加本文结束

在路径 \themes\next\layout\_macro 中新建 passage-end-tag.swig 文件,并添加以下内容：

<div>
    {% if not is_index %}
        <div style="text-align:center;color: #ccc;font-size:14px;">-------------本文结束<i class="fa fa-paw"></i>感谢您的阅读-------------</div>
    {% endif %}
</div>

接着打开\themes\next\layout\_macro\post.swig文件，在post-body 之后， post-footer 之前添加如下画红色部分代码（post-footer之前两个DIV）：

<div>
  {% if not is_index %}
    {% include 'passage-end-tag.swig' %}
  {% endif %}
</div>

然后打开主题配置文件（_config.yml),在末尾添加：

# 文章末尾添加“本文结束”标记
passage_end_tag:
  enabled: true

修改代码自定义样式

打开\themes\next\source\css\_custom\custom.styl,向里面加入：

// Custom styles.
code {
    color: #ff7600;
    background: #fbf7f8;
    margin: 2px;
}
// 大代码块的自定义样式
.highlight, pre {
    margin: 5px 0;
    padding: 5px;
    border-radius: 3px;
}
.highlight, code, pre {
    border: 1px solid #d6d6d6;
}

侧边栏图标样式

# Social Links
# Key is the link label showing to end users.
# Value is the target link (E.g. GitHub: https://github.com/iissnan)
social:
  #LinkLabel: Link
  简书: https://www.jianshu.com/ 
  RGB: https://www.sioe.cn/yingyong/yanse-rgb-16/
# Social Links Icons
# Icon Mapping:
#   Map a menu item to a specific FontAwesome icon name.
#   Key is the name of the item and value is the name of FontAwesome icon. Key is case-senstive.
#   When an globe mask icon presenting up means that the item has no mapping icon.
social_icons:
  简书: heartbeat
  RGB: camera-retro
  enable: true
  icons_only: false
  transition: false
  # Icon Mappings.
  # KeyMapsToSocialItemKey: NameOfTheIconFromFontAwesome
  GitHub: github
  E-Mail: envelope
  Google: google
  Twitter: twitter
  FB Page: facebook
  VK Group: vk
  Skype: skype
  YouTube: youtube
  Instagram: instagram
  StackOverflow: stack-overflow
  Weibo: weibo

侧边栏推荐阅读：

主题配置文件里

# Blog rolls
links_title: 参考阅读
#links_layout: block
links_layout: inline
links:
  #Title: http://example.com/
  hexoModify: https://segmentfault.com/a/1190000009544924#item-29
  正则在线: https://c.runoob.com/front-end/854
  爬虫头生成: https://curl.trillworks.com/

2.添加一个宠物

博客路径：npm install -save hexo-helper-live2d

继续在博客路径里：选择一个你喜欢的模型

https://blog.csdn.net/wang_123_zy/article/details/87181892

npm install live2d-widget-model-koharu

将下列代码放到博客配置文件里：

live2d:
  enable: true
  scriptFrom: local
  pluginRootPath: live2dw/
  pluginJsPath: lib/
  pluginModelPath: assets/
  model:
    use: live2d-widget-model-wanko
  display:
    position: right
    width: 150
    height: 300
  mobile:
    show: true

3.统计功能

具体实现方法

在根目录下安装 hexo-wordcount,运行：

$ npm install hexo-wordcount --save

然后在主题的配置文件中，配置如下：

# Post wordcount display settings
# Dependencies: https://github.com/willin/hexo-wordcount
post_wordcount:
  item_text: true
  wordcount: true
  min2read: true