美化Next博客

in 网站建设
关注公众号【好便宜】( ID:haopianyi222 ),领红包啦~
阿里云,国内最大的云服务商,注册就送数千元优惠券:https://t.cn/AiQe5A0g
腾讯云,良心云,价格优惠: https://t.cn/AieHwwKl
搬瓦工,CN2 GIA 优质线路,搭梯子、海外建站推荐: https://t.cn/AieHwfX9

1.前言

在 Hexo 中有2份主要的配置文件,其名称都是_config.yml。 其中,一份位于博客根目录下,主要包含 Hexo 本身的配置;另一份位于themes/next/目录下,用于配置主题相关的选项。

2.Next主题安装

Hexo安装主题,只需要将主题文件拷贝至博客所在目录的themes目录下,修改相关配置文件即可生效。 博客所在目录下打开git bash

3.启用主题

打开根目录下的_config.yml,查找theme字段,将字段改为theme: next(冒号:之后要有空格分隔,否则无效)

theme: next

之后通过hexo g和hexo s,再在浏览器中访问localhost:4000即可本地预览主题效果。

4.设置站点名、作者昵称和站点描述等内容

打开根目录下的_config.yml

# Site

title: Hongery

subtitle: 记录学习中的点点滴滴

description: 直到这一刻微笑着说话为止,我至少留下了一公升眼泪

keywords:

author: Hongery

language: zh-CN # 主题语言

timezone: Asia/Shanghai #中国的时区,不要乱改城市

# URL

## If your site is put in a subdirectory, set url as and root as '/child/'

url: https://huangpiao.tech #绑定域名

root: /  #默认根路径,指向实际的source

permalink: :year/:month/:day/:title/

permalink_defaults:

# Directory

source_dir: source

public_dir: public

tag_dir: tags

archive_dir: archives

category_dir: categories

code_dir: downloads/code

i18n_dir: :lang

skip_render: README.md # 部署的时候不包含的文件

# Writing

new_post_name: :title.md # 默认的新博文名称

default_layout: post # 默认布局

titlecase: false # Transform title into titlecase

external_link: true # Open external links in new tab

filename_case: 0 #把博客名称改成小写/大写(1,2)

render_drafts: false # 是否显示草稿

post_asset_folder: false #是否启用资源文件夹(用来存放相对路径图片或文件)

relative_link: false # 把链接改为与根目录的相对位址

future: true

highlight:

  enable: true #是否开启代码高亮

  line_number: true #是否增加代码行号

  auto_detect: true #自动判断代码语言

  tab_replace:

# Home page setting

# path: Root path for your blogs index page. (default = '')

# per_page: Posts displayed per page. (0 = disable pagination)

# order_by: Posts order. (Order by date descending by default)

index_generator: #首页博客分布

  path: '' #博客的默认路径

  per_page: 10 #每页博客数量上限

  order_by: -date #博客排序

# Date / Time format

## Hexo uses Moment.js to parse and display date

## You can customize the date format as defined in

date_format: YYYY-MM-DD #博客日期格式

time_format: HH:mm:ss #博客时间格式

# Pagination

## Set per_page to 0 to disable pagination

per_page: 10 #同上

归档页的分页设置

archive_generator: #归档页的配置

  per_page: 30 #归档页每页博客数

  yearly: true #按年归档

  monthly: true #按月归档

标签页的分页设置

tag_generator:

  per_page: 20 #标签页每页博客数

theme: next6 #选择博客主题,名字为themes中选择的主题文件夹名称

# Deployment

## Docs: function(){ //外汇代理 www.kaifx.cn/ib/

deploy: #博客部署

  type: git

5.选择主题风格

打开themes/next/下的_config.yml,查找scheme,可以看到如下四种不同的风格方案:

scheme: Muse

scheme: Mist

scheme: Pisces

scheme: Gemini

去掉#注释,即启用对应的scheme,博主采用Pisces主题 双栏 Scheme,大家可以依次测试效果,选择自己喜欢的scheme。

6.设置语言

编辑 站点配置文件, 将 language 设置成你所需要的语言。建议明确设置你所需要的语言,例如选用简体中文,配置如下:

language: zh-CN

7.设置菜单

menu: #设置博客各个页面的相对路径,默认根路径是blog/source

  home: / || home

  about: /about/ || user

  tags: /tags/ || tags

  categories: /categories/ || th

  archives: /archives/ || archive

  #schedule: /schedule/ || calendar #日历

  #sitemap: /sitemap.xml || sitemap #站点地图,供搜索引擎爬取

  #commonweal: /404/ || heartbeat # 腾讯公益404

8.设置头像

可以设置当鼠标放置在头像上时,头像自动旋转 编辑 主题配置文件, 修改字段 avatar, 值设置成头像的链接地址。其中,头像的链接地址可以是:

avatar:

  # in theme directory(source/images): /images/avatar.gif

  # in site  directory(source/uploads): /uploads/avatar.gif

  # You can also use other linking images.

  url: /images/author.jpg  #将我们的头像图片放置在blog/themes/next/source/images目录下,填写具体地址

  # If true, the avatar would be dispalyed in circle.

  rounded: true #鼠标放在头像上时是否旋转

  # The value of opacity should be choose from 0 to 1 to set the opacity of the avatar.

  opacity: 1 #头像放缩指数

  # If true, the avatar would be rotated with the cursor.

  rotated: true #头像是否设为圆形,否则为矩形

9.鼠标点击特效

在/themes/next/source/js/src下新建文件 clicklove.js ,接着把下面的代码拷贝粘贴到 clicklove.js 文件中:

!function(e,t,a){function n(){c(".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;}"),o(),r()}function r(){for(var e=0;e<d.length;e++)d[e].alpha<=0?(t.body.removeChild(d[e].el),d.splice(e,1)):(d[e].y--,d[e].scale+=.004,d[e].alpha-=.013,d[e].el.style.cssText="left:"+d[e].x+"px;top:"+d[e].y+"px;opacity:"+d[e].alpha+";transform:scale("+d[e].scale+","+d[e].scale+") rotate(45deg);background:"+d[e].color+";z-index:99999");requestAnimationFrame(r)}function o(){var t="function"==typeof e.onclick&&e.onclick;e.onclick=function(e){t&&t(),i(e)}}function i(e){var a=t.createElement("div");a.className="heart",d.push({el:a,x:e.clientX-5,y:e.clientY-5,scale:1,alpha:1,color:s()}),t.body.appendChild(a)}function c(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 s(){return"rgb("+(255*Math.random())+","+(255*Math.random())+","+~~(255*Math.random())+")"}var d=[];e.requestAnimationFrame=function(){return e.requestAnimationFrame||e.webkitRequestAnimationFrame||e.mozRequestAnimationFrame||e.oRequestAnimationFrame||e.msRequestAnimationFrame||function(e){setTimeout(e,1e3/60)}}(),n()}(window,document);

在\themes\next\layout\_layout.swig文件末尾添加:

<!-- 页面点击小红心 -->

<script type="text/javascript" src="https://segmentfault.com/js/src/clicklove.js"></script>

10.文章结束标志

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

<div>

    {% if not is_index %}

        <div >-------------本文结束感谢您的阅读-------------</div>

    {% endif %}

</div>

接着打开\themes\next\layout\_macro\post.swig文件,在post-body 之后(END POST BODY), post-footer 之前添加如代码:

<div>

  {% if not is_index %}

    {% include 'passage-end-tag.swig' %}

  {% endif %}

</div>

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

# 文章末尾添加“本文结束”标记

passage_end_tag:

  enabled: true

11边栏设置

设置主题配置文件,其中social表示社交信息,我们可以填入我们相关的链接,格式为链接名:链接地址 || 链接图标,其中链接图标必须是FontAwesome网站中存在的图标名。

# Posts / Categories / Tags in sidebar.

site_state: true # 是否在侧边栏加入日志、分类、标签等跳转链接

# Social Links

# Usage: `Key: permalink || icon`

# Key is the link label showing to end users.

# Value before `||` delimeter is the target permalink.

# Value after `||` delimeter is the name of FontAwesome icon. If icon (with or without delimeter) is not specified, globe icon will be loaded.

social_icons:

  enable: true #是否显示社交图标

  icons_only: false #是否仅显示社交图标

  transition: true

# Follow me on GitHub banner in right-top corner.

# Usage: `permalink || title`

# Value before `||` delimeter is the target permalink.

# Value after `||` delimeter is the title and aria-label name.

github绑带

# Blog rolls

links_icon: link

links_title: Links

links_layout: block

links_layout: inline

links:

# Sidebar Avatar

avatar: #头像设置

  # in theme directory(source/images): /images/avatar.gif

  # in site  directory(source/uploads): /uploads/avatar.gif

  # You can also use other linking images.

  url: /images/author.jpg

  # If true, the avatar would be dispalyed in circle.

  rounded: true

  # The value of opacity should be choose from 0 to 1 to set the opacity of the avatar.

  opacity: 1

  # If true, the avatar would be rotated with the cursor.

  rotated: true

# Table Of Contents in the Sidebar

toc:

  enable: true #是否自动生成目录

  # Automatically add list number to toc.

  number: false #目录是否自动产生编号

  # If true, all words will placed on next lines if header width longer then sidebar width.

  wrap: false #标题过长是否换行

  # Maximum heading depth of generated toc. You can set it in one post through `toc_max_depth` var.

  max_depth: 6 #最大标题深度

sidebar:

  # Sidebar Position, available values: left | right (only for Pisces | Gemini).

  position: left #侧边栏位置

  #position: right

  # Manual define the sidebar width.

  # If commented, will be default for:

  # Muse | Mist: 320

  # Pisces | Gemini: 240

  #width: 300

  # Sidebar Display, available values (only for Muse | Mist):

  #  - post    expand on posts automatically. Default.

  #  - always  expand for all pages automatically

  #  - hide    expand only when click on the sidebar toggle icon.

  #  - remove  Totally remove sidebar including sidebar toggle.

  display: post

  #display: always

  #display: hide

  #display: remove

  # Sidebar offset from top menubar in pixels (only for Pisces | Gemini).

  offset: 12 #侧边栏相对主菜单像素距离

  # Back to top in sidebar.

  b2t: true #是否提供一键置顶

  # Scroll percent label in b2t button.

  scrollpercent: true #是否显示当前阅读进度

  # Enable sidebar on narrow view (only for Muse | Mist).

  onmobile: false #手机上是否显示侧边栏

12.设置博客底部布局

这一部分对应主题配置文件中的:

footer:

  # Specify the date when the site was setup.

  # If not defined, current year will be used.

  since: 2019 #建站时间

  # Icon between year and copyright info.

  icon:

      # `heart` is recommended with animation in red (#ff0000).

    name: heart  #作者图标(默认是author人像)

    # If you want to animate the icon, set it to true.

    animated: true #图标是否闪动

    # Change the color of icon, using Hex Code.

    color: "#808080" #图标颜色

  # If not defined, `author` from Hexo main config will be used.

  copyright: 黄飘 #别填bool型,最后显示的东西是copyright || author,即左边没有设置的话就显示作者

  # -------------------------------------------------------------

  powered:

    # Hexo link (Powered by Hexo).

    enable: false #是否显示 Powered by hexo

    # Version info of Hexo after Hexo link (vX.X.X).

    version: false #是否显示Hexo版本

  theme:

    # Theme & scheme info link (Theme - NexT.scheme).

    enable: false #是否显示主题信息

    # Version info of NexT after scheme info (vX.X.X).

    version: false #是否显示主题版本

  # -------------------------------------------------------------

  # Beian icp information for Chinese users. In China, every legal website should have a beian icp in website footer.

  beian:

    enable: false #是否显示网站备案信息

    icp:

  # -------------------------------------------------------------

  # Any custom text can be defined here.

  #custom_text: Hosted  class="theme-link" rel="noopener" target="_blank">Coding Pages

​13.添加打赏功能
在主题配置文件中设置如下:

reward:

enable: true

  comment: 坚持原创技术分享,您的支持将鼓励我继续创作!

  wechatpay: /images/wechatpay.jpg

  alipay: /images/alipay.jpg

14.摘要功能

对于摘要显示,首先我们需要开启摘要功能,修改主题配置文件:

# Automatically scroll page to section which is under <!-- more --> mark.

scroll_to_more: true #选取博客正文<!--more-->前的内容

# Automatically saving scroll position on each post/page in cookies.

save_scroll: false

# Automatically excerpt description in homepage as preamble text.

excerpt_description: true #自动截取摘要

# Automatically Excerpt. Not recommend.

# Use <!-- more --> in the post to control excerpt accurately.

auto_excerpt:

  enable: false #自动截取一定程度的摘要

  length: 150

# Read more button

# If true, the read more button would be displayed in excerpt section.

read_more_btn: true #显示阅读全文按钮

关注公众号【好便宜】( ID:haopianyi222 ),领红包啦~
阿里云,国内最大的云服务商,注册就送数千元优惠券:https://t.cn/AiQe5A0g
腾讯云,良心云,价格优惠: https://t.cn/AieHwwKl
搬瓦工,CN2 GIA 优质线路,搭梯子、海外建站推荐: https://t.cn/AieHwfX9
扫一扫关注公众号添加购物返利助手,领红包
Comments are closed.

推荐使用阿里云服务器

超多优惠券

服务器最低一折,一年不到100!

朕已阅去看看