首页 > 其他分享> > hexo安装好后基本操作和花里胡哨操作

hexo安装好后基本操作和花里胡哨操作

2021-04-14 20:58:14 作者：互联网

基本操作

根目录下的 _config.yml 解读

# Site
title: 奇特  #博客标题
subtitle: ''  #博客副标题
description: '一个在github上搭建的hexo博客'  #博客描述
keywords:  #博客关键字
author: sywdebug  #作者
language: zh_CN  #语言
timezone: 'Asia/Shanghai'  #时区

# URL
## 在此处设置您的网站网址。 例如，如果您使用GitHub Page，则将url设置为“ https://username.github.io/project”
url: https://sywdebug.gitee.io/blog  #网址
root:/blog/  #根目录
permalink: :year/:month/:day/:title/  #文章的 永久链接 格式
permalink_defaults:  #永久链接中各部分的默认值
pretty_urls:  #改写 permalink 的值来美化 URL
  trailing_index: true  #是否在永久链接中保留尾部的 index.html，设置为 false 时去除
  trailing_html: true  #是否在永久链接中保留尾部的 .html, 设置为 false 时去除 (对尾部的 index.html无效)

网站存放在子目录
如果您的网站存放在子目录中，例如 http://example.com/blog，则请将您的 url 设为 http://example.com/blog 并把 root 设为 /blog/。

# Directory
source_dir: source  #资源文件夹，这个文件夹用来存放内容。
public_dir: public  #公共文件夹，这个文件夹用于存放生成的站点文件。
tag_dir: tags  #标签文件夹
archive_dir: archives  #归档文件夹
category_dir: categories  #分类文件夹
code_dir: downloads/code  #Include code 文件夹，source_dir 下的子目录
i18n_dir: :lang  #国际化（i18n）文件夹
skip_render:  #跳过指定文件的渲染。匹配到的文件将会被不做改动地复制到 public 目录中。您可使用 glob 表达式来匹配路径。

# Writing
new_post_name: :title.md  #新文章的文件名称
default_layout: post  #预设布局
auto_spacing:false  #在中文和英文之间加入空格
titlecase: false  #把标题转换为 title case
external_link:  #在新标签中打开链接
  enable: true  #在新标签中打开链接
  field: site  #对整个网站（site）生效或仅对文章（post）生效
  exclude: ''  #需要排除的域名。主域名和子域名如 www 需分别配置
filename_case: 0  #把文件名称转换为 (1) 小写或 (2) 大写
render_drafts: false  #显示草稿
post_asset_folder: false  #启动 [Asset 文件夹](https://hexo.io/zh-cn/docs/asset-folders)
relative_link: false  #把链接改为与根目录的相对位址
future: true  #显示未来的文章
highlight:  #代码块的设置, see [Highlight.js](https://hexo.io/docs/syntax-highlight#Highlight-js) section for usage guide
  enable: true
  line_number: true
  auto_detect: false
  tab_replace: ''
  wrap: true
  hljs: false
prismjs:  #代码块的设置, see [PrismJS](https://hexo.io/docs/syntax-highlight#PrismJS) section for usage guide
  enable: false
  preprocess: true
  line_number: true
  tab_replace: ''

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: landscape  #主题

# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
deploy:
  type: git
  repo: https://github.com/sywdebug/blog.git
  branch: master

主题下的 _config.yml 解读

# Schemes
scheme: Muse - 默认 Scheme，这是 NexT 最初的版本，黑白主调，大量留白
#scheme: Mist - Muse 的紧凑版本，整洁有序的单栏外观
#scheme: Pisces - 双栏 Scheme，小家碧玉似的清新
#scheme: Gemini

favicon:
  small: /images/favicon-16x16-next.png  #图标
  medium: /images/favicon-32x32-next.png  #图标
  apple_touch_icon: /images/apple-touch-icon-next.png  #图标
  safari_pinned_tab: /images/logo.svg
  #android_manifest: /manifest.json

# Custom Logo (Warning: Do not support scheme Mist)
custom_logo: #/uploads/custom-logo.jpg  #主标题上方的logo

creative_commons:
  license: by-nc-sa
  sidebar: false  #侧边栏中的版权标识
  post: false  #每篇文章底部都显示版权信息
  language: zh_CN  #语言

# 侧边导航栏菜单
menu:
  #home: / || fa fa-home  #首页
  #about: /about/ || fa fa-user  #关于
  #tags: /tags/ || fa fa-tags  #标签
  #categories: /categories/ || fa fa-th  #分类
  #archives: /archives/ || fa fa-archive  #归档
  #schedule: /schedule/ || fa fa-calendar
  #sitemap: /sitemap.xml || fa fa-sitemap
  #commonweal: /404/ || fa fa-heartbeat  #公益404

# ---------------------------------------------------------------
# Sidebar Settings  #侧边栏设置
# See: [https://theme-next.js.org/docs/theme-settings/sidebar](https://theme-next.js.org/docs/theme-settings/sidebar)
# ---------------------------------------------------------------

sidebar:
  # Sidebar Position.  #侧边栏定位：默认左侧
  position: left  
  #position: right

  # Sidebar Display (only for Muse | Mist), available values:
  #  - post    帖子自动展开。 默认
  #  - always  始终自动展开所有页面
  #  - hide    仅在单击侧栏切换图标时隐藏展开。
  #  - remove  完全删除侧边栏，包括侧边栏切换。
  display: post

# Sidebar Avatar  #侧边栏头像设置
avatar:
  url: /images/avatar.png  #路径
  rounded: false  #是否圆形
  rotated: false  #是否光标移上去后旋转

# 侧边栏外链
social:
  GitHub: https://github.com/sywdebug || fab fa-github
  E-Mail: mailto:sywdebug@gmail.com || fa fa-envelope
  #Weibo: https://weibo.com/yourname || fab fa-weibo
  #Google: https://plus.google.com/yourname || fab fa-google
  #Twitter: https://twitter.com/yourname || fab fa-twitter
  #FB Page: https://www.facebook.com/yourname || fab fa-facebook
  #StackOverflow: https://stackoverflow.com/yourname || fab fa-stack-overflow
  #YouTube: https://youtube.com/yourname || fab fa-youtube
  #Instagram: https://instagram.com/yourname || fab fa-instagram
  #Skype: skype:yourname?call|chat || fab fa-skype

# 侧边栏友情链接
links_settings:
  icon: fa fa-link
  title: 友情链接
  # Available values: block | inline
  layout: block
  
links:
  奇特主页: http://sywdebug.com

# 打赏功能
reward_settings:
  enable: true  #如果为true，则默认情况下会在每篇文章中显示一个捐赠按钮
  animation: false
  comment: 大爷赏点吧，求求了

reward:
  wechatpay: /images/wechatpay.png  #微信收款码
  alipay: /images/alipay.png  #支付宝收款码
  #paypal: /images/paypal.png
  #bitcoin: /images/bitcoin.png

# 其他发布渠道
follow_me:
  CSDN: https://blog.csdn.net/sywdebug?spm=1000.2115.3001.5343 || fab fa-contao
  wordpress: http://blog.sywdebug.ml || fab fa-wordpress
  #WeChat: /images/wechat_channel.jpg || fab fa-weixin
  #RSS: /atom.xml || fa fa-rss

# 返回顶部
back2top:
  enable: true
  sidebar: false  #在侧边栏中返回顶部
  scrollpercent: true  #滚动显示百分比标签。

motion:
  enable: true  #是否开启css动画
  async: false
  transition:
    # All available transition variants: https://theme-next.js.org/animate/
    post_block: fadeIn
    post_header: fadeInDown
    post_body: fadeInDown
    coll_header: fadeInLeft
    # Only for Pisces | Gemini.
    sidebar: fadeInUp

花里胡哨

在右上角或左上角添加 fork me on github

点击 GitHub Ribbons 或 GitHub Corners 挑选自己喜欢的样式，复制代码

打开 /themes/next/layout/_layout.njk 文件
将复制的代码放在 <div class="headband"></div> 的下面
把网址改成自己的 github 网址即可

在这里插入图片描述

添加线条背景

注意：如果next主题在5.1.1以上的话就不用我这样设置，直接在主题配置文件中找到canvas_nest: false，把它改为canvas_nest: true就行了（注意分号后面要加一个空格）

打开 /themes/next/layout/_layout.njk 文件
在 body 里面添加代码

{% if theme.canvas_nest %}
<script type="text/javascript" src="//cdn.bootcss.com/canvas-nest.js/1.0.0/canvas-nest.min.js"></script>
{% endif %}
也可以使用
{% if theme.canvas_nest %}
<script type="text/javascript" color="0,0,255" opacity='0.7' zIndex="-2" count="99" src="//cdn.bootcss.com/canvas-nest.js/1.0.0/canvas-nest.min.js"></script>
{% endif %}
配置项
color ：线条颜色, 默认: '0,0,0'；三个数字分别为(R,G,B)
opacity: 线条透明度（0~1）, 默认: 0.5
count: 线条的总数量, 默认: 150
zIndex: 背景的z-index属性，css属性用于控制所在层的位置, 默认: -1

打开 /themes/next/_config.yml 最后写上

# --------------------------------------------------------------
# background settings
# --------------------------------------------------------------
# add canvas-nest effect
# see detail from https://github.com/hustcc/canvas-nest.js
canvas_nest: true

在这里插入图片描述

点击实现桃心效果和24字真言（自测没成功，有机会再改）

在 /themes/next/source/js 下新建 clicklove.js 文件，写入以下代码

!function (e, t, a) {function r() {for (var e = 0; e < s.length; e++) s[e].alpha <= 0 ? (t.body.removeChild(s[e].el), s.splice(e, 1)) : (s[e].y--, s[e].scale += .004, s[e].alpha -= .013, s[e].el.style.cssText = "left:" + s[e].x + "px;top:" + s[e].y + "px;opacity:" + s[e].alpha + ";transform:scale(" + s[e].scale + "," + s[e].scale + ") rotate(45deg);background:" + s[e].color + ";z-index:99999");requestAnimationFrame(r)}function n() {var t = "function" == typeof e.onclick && e.onclick;e.onclick = function (e) {t && t(), o(e)}}function o(e) {var a = t.createElement("div");a.className = "heart", s.push({el: a,x: e.clientX - 5,y: e.clientY - 5,scale: 1,alpha: 1,color: c()}), t.body.appendChild(a)}function i(e) {var a = t.createElement("style");a.type = "text/css";try {a.appendChild(t.createTextNode(e))} catch (t) {a.styleSheet.cssText = e}t.getElementsByTagName("head")[0].appendChild(a)}function c() {return "rgb(" + ~~(255 * Math.random()) + "," + ~~(255 * Math.random()) + "," + ~~(255 * Math.random()) + ")"}var s = [];e.requestAnimationFrame = e.requestAnimationFrame || e.webkitRequestAnimationFrame || e.mozRequestAnimationFrame || e.oRequestAnimationFrame || e.msRequestAnimationFrame || function (e) {setTimeout(e, 1e3 / 60)}, i(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: fixed;}.heart:after{top: -5px;}.heart:before{left: -5px;}"), n(), r()}(window, document);

然后在 /themes/next/layout/_layout.njk 文件内的 body 中引入 clicklove.js 文件

真言同上，js代码为

(function() {var coreSocialistValues = ["富强", "民主", "文明", "和谐", "自由", "平等", "公正", "法治", "爱国", "敬业", "诚信", "友善"],index = Math.floor(Math.random() * coreSocialistValues.length);document.body.addEventListener('click',function(e) {if (e.target.tagName == 'A') {return;}var x = e.pageX,y = e.pageY,span = document.createElement('span');span.textContent = coreSocialistValues[index];index = (index + 1) % coreSocialistValues.length;span.style.cssText = ['z-index: 9999999; position: absolute; font-weight: bold; color: #ff6651; top: ', y - 20, 'px; left: ', x, 'px;'].join('');document.body.appendChild(span);animate(span);});})

修改文章内链接文本样式

在 /themes/next/source/css/_common/components/post/index.styl 内添加以下代码即可

// 文章内链接文本样式
.post-body p a{
  color: #0593d3;
  border-bottom: none;
  border-bottom: 1px solid #0593d3;
  &:hover {
    color: #fc6423;
    border-bottom: none;
    border-bottom: 1px solid #fc6423;
  }
}

在这里插入图片描述

修改文章底部的那个带#号的标签

修改 /themes/next/layout/_macro/post.njk 文件

搜索 rel="tag"
将后面的{{ tag_indicate }}换成
<i class="fa fa-tag"></i>
即可

在这里插入图片描述

在每篇文章末尾统一添加“本文结束”标记

在路径 \themes\next\layout_macro 中新建 passage-end-tag.njk 文件，写入

<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.njk 文件
在 post-footer 之前添加以下代码

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

在这里插入图片描述
打开 /themes/next/_config.yml 最后写上

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

在这里插入图片描述

网站底部字数统计

使用以下命令安装插件

npm install hexo-wordcount --save

然后在 /themes/next/layout/_partials/footer.njk 的合适的地方写入

<div class="theme-info">
  <div class="powered-by"></div>
  <span class="post-count">博客全站共{{ totalcount(site) }}字</span>
</div>

在这里插入图片描述

实现字数统计和阅读需要时长显示

使用以下命令安装 hexo-symbols-count-time 插件

npm install hexo-symbols-count-time --save

在根目录下的 _config.yml 下写入

symbols_count_time:
  symbols: true                # 文章字数统计
  time: true                   # 文章阅读时长
  total_symbols: true          # 站点总字数统计
  total_time: true             # 站点总阅读时长
  exclude_codeblock: false     # 排除代码字数统计

next 自带 symbols_count_time，修改 /themes/next/_config.yml 中的 symbols_count_time

separated_meta: true     # 是否另起一行（true的话不和发表时间等同一行）
  item_text_post: true     # 首页文章统计数量前是否显示文字描述（本文字数、阅读时长）
  item_text_total: true   # 页面底部统计数量前是否显示文字描述（站点总字数、站点阅读时长）
  awl: 4                   # 平均单词长度
  wpm: 275                 # 每分钟阅读词数
  suffix: mins.

在这里插入图片描述

在文章底部增加版权信息

在 /themes/next/layout/_macro 下创建 my-copyright.njk，并写入

{% if page.copyright %}
<div class="my_post_copyright">
  <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
  
  <!-- JS库 sweetalert 可修改路径 -->
  <script src="https://cdn.bootcss.com/jquery/2.0.0/jquery.min.js"></script>
  <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
  <p><span>本文标题:</span><a href="{{ url_for(page.path) }}">{{ page.title }}</a></p>
  <p><span>文章作者:</span><a href="/" title="访问 {{ theme.author }} 的个人博客">{{ theme.author }}</a></p>
  <p><span>发布时间:</span>{{ page.date.format("YYYY年MM月DD日 - HH:mm") }}</p>
  <p><span>最后更新:</span>{{ page.updated.format("YYYY年MM月DD日 - HH:mm") }}</p>
  <p><span>原始链接:</span><a href="{{ url_for(page.path) }}" title="{{ page.title }}">{{ page.permalink }}</a>
    <span class="copy-path"  title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="{{ page.permalink }}"  aria-label="复制成功！"></i></span>
  </p>
  <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license" href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank" title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0 国际</a> 转载请保留原文链接及作者。</p>  
</div>
<script> 
    var clipboard = new Clipboard('.fa-clipboard');
      $(".fa-clipboard").click(function(){
      clipboard.on('success', function(){
        swal({   
          title: "",   
          text: '复制成功',
          icon: "success", 
          showConfirmButton: true
          });
        });
    });  
</script>
{% endif %}

在 /themes/next/source/css/_common/components/post/ 下创建 my-post-copyright.styl，并写入

.my_post_copyright {
  width: 85%;
  max-width: 45em;
  margin: 2.8em auto 0;
  padding: 0.5em 1.0em;
  border: 1px solid #d3d3d3;
  font-size: 0.93rem;
  line-height: 1.6em;
  word-break: break-all;
  background: rgba(255,255,255,0.4);
}
.my_post_copyright p{margin:0;}
.my_post_copyright span {
  display: inline-block;
  width: 5.2em;
  color: #b5b5b5;
  font-weight: bold;
}
.my_post_copyright .raw {
  margin-left: 1em;
  width: 5em;
}
.my_post_copyright a {
  color: #808080;
  border-bottom:0;
}
.my_post_copyright a:hover {
  color: #a3d2a3;
  text-decoration: underline;
}
.my_post_copyright:hover .fa-clipboard {
  color: #000;
}
.my_post_copyright .post-url:hover {
  font-weight: normal;
}
.my_post_copyright .copy-path {
  margin-left: 1em;
  width: 1em;
  +mobile(){display:none;}
}
.my_post_copyright .copy-path:hover {
  color: #808080;
  cursor: pointer;
}

在 /themes/next/layout/_macro/post.njk 合适的地方写入

<div>
      {% if not is_index %}
        {% include 'my-copyright.njk' %}
      {% endif %}
</div>

可以自行查找原来的版权信息并注释
最后在 /themes/next/source/css/_common/components/post/index.styl 添加

@import "my-post-copyright";

如果要显示此版权信息，要在博客的md文档上加入 copyright: true，否则不生效
如果觉得每次都要输入copyright: true很麻烦的话，可以在 /scaffolds/post.md文件中添加：copyright:
这样每次 hexo new 的时候会自动添加

❀❀❀❀❀❀完结散花❀❀❀❀❀❀

标签：false,hexo,next,fa,https,基本操作,post,好后,true
来源： https://blog.csdn.net/sywdebug/article/details/115696821