1200字范文 > Hexo框架下用NexT(v7.0+)主题美化博客

Hexo框架下用NexT(v7.0+)主题美化博客

时间：2023-03-15 09:23:31

1. 前言

前文：Windows下通过GitHub+Hexo搭建个人博客的步骤；

博主的个人博客：https://hunter1023.github.io/ 按照本篇博客美化。

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

2. 基础设置

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

打开根目录下的_config.yml

# Sitetitle: 特叔服务subtitle: keywords:author: Hunterdescription: Tough times never last, but tough people do.

2.2. NexT主题的安装

顾名思义，所谓主题就是界面的展示样式。Hexo安装主题，只需要将主题文件拷贝至博客所在目录的themes目录下，修改相关配置文件即可生效。

博客所在目录下打开git bash，再通过Git clone /theme-next/hexo-theme-next themes/next即可完成。

2.3 启用主题

打开根目录下的_config.yml,查找theme字段，将字段改为theme: next(冒号:之后要有空格分隔，否则无效) ，之后通过hexo g和hexo s，再在浏览器中访问localhost:4000即可本地预览主题效果。

3. 主题设定

3.1 选择scheme

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

scheme: Muse#scheme: Mist#scheme: Pisces#scheme: Gemini

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

3.2 设置语言

博客框架默认的语言是英文，前往/themes/next/languages，查看当前NexT版本简体中文对照文件的名称是zh-Hans还是zh-CN。

再前往根目录下的_config.yml，查找language，设置成language: zh-Hans或language: zh-CN，即显示简体中文。

3.3 设置菜单及对应页面

打开themes/next/下的_config.yml，查找menu

menu:home: / || home#about: /about/ || usertags: /tags/ || tagscategories: /categories/ || tharchives: /archives/ || archive#schedule: /schedule/ || calendar#sitemap: /sitemap.xml || sitemap#commonweal: /404/ || heartbeat

去掉#注释即可显示对应的菜单项，也可自定义新的菜单项。||之前的值是目标链接，之后的是分类页面的图标，图标名称来自于FontAwesome icon。若没有配置图标，默认会使用问号图标。

新添加的菜单需要翻译对应的中文

打开hexo/theme/next/languages/zh-CN.yml，在menu下自定义，如：

menu:resources: 资源

hexo new page "categories"

此时在根目录的source文件夹下会生成一个categories文件，文件中有一个index.md文件，修改内容如下

---title: 分类date: -12-14 13:05:38type: "categories"comments: false---

注：如果有启用评论，默认页面带有评论。需要关闭的话，添加字段comments并将值设置为false。

3.4 设定站点建立时间

打开**themes/next/下的_config.yml**，查找since

footer:# Specify the date when the site was setup.# If not defined, current year will be used.#since:

如果不设置，默认显示当前年份。

4. 美化

4.1 设置头像

打开themes/next/下的_config.yml，查找avatar

# Sidebar Avatar# in theme directory(source/images): /images/avatar.gif# in site directory(source/uploads): /uploads/avatar.gifavatar: http://XXXXXXXXX

avatar的值是图片的链接地址(完整的URI 或者站内的相对地址皆可)

之后创建博文，对图片的引用同样可以按照上述地址获取。

4.2 网站图标设置

图标素材网站：iconfont；easyicon下载16x16以及32x32大小的PNG格式图标，置于/themes/next/source/images/下打开**themes/next/下的_config.yml**，查找favicon

favicon:small: /images/favicon-16x16-next.pngmedium: /images/favicon-32x32-next.pngapple_touch_icon: /images/apple-touch-icon-next.pngsafari_pinned_tab: /images/logo.svg#android_manifest: /images/manifest.json#ms_browserconfig: /images/browserconfig.xml

修改small和medium的路径为下载的图标路径

4.3 背景动画

4.3.1 Canvas-nest风格

4.3.2 JavaScript 3D library风格

进入theme/next目录执行命令：git clone /theme-next/theme-next-three source/lib/three将themes/next/_config.yml中查找theme-next-three，将想要的效果改为true即可：

# three_wavesthree_waves: false# canvas_linescanvas_lines: true# canvas_spherecanvas_sphere: false

4.4 背景图片/顶栏、底栏图片（背景色）、侧栏背景及内部文字颜色

打开theme/next/source/css/_custom/custom.styl，添加以下代码

//背景图片body{ background:url(图片链接);background-size:cover;background-repeat:no-repeat;background-attachment:fixed;background-position:center;}//顶栏图片.header {background:url(图片链接) none repeat scroll !important;}//底栏背景色.footer {background:rgba(颜色rgb,透明度) none repeat scroll !important;}//侧栏图片及内部文字颜色修改#sidebar {background:url(图片链接);background-size: cover;background-position:center;background-repeat:no-repeat;p,span,a {color: 颜色代码;}}

其中的css样式属性都可以根据图片修改，以达到满意的效果。

4.5 侧栏置于左侧，修改控制按钮样式

默认情况下，侧栏仅在文章页面（拥有目录列表）时才显示，并放置于右侧位置。打开themes/next/下的_config.yml，查找sidebar

4.5.1 设置侧栏在左侧/右侧

Pisces或Gemini方案

sidebar:position: left#position: right

Mist或Muse方案打开next/source/js/src/motion.js，查找paddingRight，把所有（2个）PaddingRight更改为paddingLeft即可。打开next/source/css/_custom/custom.styl，添加如下内容：

//侧边栏置于左侧.sidebar {left: 0;}//侧栏开关置于左侧.sidebar-toggle {left: $b2t-position-right;}

打开next/source/css/_common/components/back-to-top.styl，将right: $b2t-position-right;改为left: $b2t-position-right;

4.5.2 显示侧边栏的时机

#post - 默认行为，在文章页面（拥有目录列表）时显示#always - 在所有页面中都显示#hide - 在所有页面中都隐藏（可以手动展开）#remove - 完全移除display: post#display: always#display: hide#display: remove

4.5.3 侧边栏控制按钮样式修改

打开themes/next/layout/source/js/src/motion.js，找到如下代码处，更换close的内容

4.6 文章底部标签显示的优化

修改/themes/next/layout/_macro/post.swig，搜索rel="tag">#，将#换成<i class="fa fa-tag"></i>

4.7 文章添加阴影、透明效果

打开theme/next/source/css/_custom/custom.styl，添加以下代码

// 主页文章添加阴影效果.post {margin-top: 60px;margin-bottom: 60px;padding: 25px;background:rgba(255,255,255,0.9) none repeat scroll !important;-webkit-box-shadow: 0 0 5px rgba(202, 203, 203, .5);-moz-box-shadow: 0 0 5px rgba(202, 203, 204, .5);}

4.8 Hexo添加文章时自动打开编辑器

首先在Hexo目录下的scripts目录中创建一个JavaScript脚本文件。

如果没有这个scripts目录，则新建一个。scripts目录新建的JavaScript脚本文件可以任意取名。

通过这个脚本，我们用其来监听hexo new这个动作，并在检测到hexo new之后，执行编辑器打开的命令。

如果你是windows平台的Hexo用户，则将下列内容写入你的脚本：

var spawn = require('child_process').exec;hexo.on('new', function(data){spawn('start "markdown编辑器绝对路径.exe" ' + data.path);});

如果你是Mac平台Hexo用户，则将下列内容写入你的脚本：

var exec = require('child_process').exec;hexo.on('new', function(data){exec('open -a "markdown编辑器绝对路径.app" ' + data.path);});

4.9 点击侧栏头像回到首页

修改/themes/next/layout/_macro/sidebar.swig，找到如下代码：

<img class="site-author-image" itemprop="image"src="{{ url_for( theme.avatar | default(theme.images + '/avatar.gif') ) }}"alt="{{ theme.author }}" />

在其前后加上<a href="/"></a>即可，如下：

<a href="/"><img class="site-author-image" itemprop="image"src="{{ url_for( theme.avatar | default(theme.images + '/avatar.gif') ) }}"alt="{{ theme.author }}" /></a>

4.10 修改中文字体

前往Google Fonts查看合适的字体打开themes/next/下的_config.yml，查找font

font:enable: true# Uri of fonts host. E.g. // (Default). 修改为墙内镜像host: global:external: truefamily: Noto Serif SC // 挑选的字体size: 16

修改/themes/next/source/css/_variables/base.styl

将

$font-family-monospace = consolas, Menlo, $font-family-chinese, monospace$font-family-monospace = get_font_family('codes'), consolas, Menlo, $font-family-chinese, monospace if get_font_family('codes')

改为

$font-family-monospace = consolas, Menlo, $font-family-base, monospace$font-family-monospace = get_font_family('codes'), consolas, Menlo, $font-family-base, monospace if get_font_family('codes')

4.11 新建文章时，在相同目录下创建同名文件夹（便于图片管理）

打开站点配置文件_config.yml，搜索post_asset_folder字段，设置其值为true安装hexo-asset-image：npm install hexo-asset-image --save此时hexo new "fileName"会在/source/_posts目录下创建同名的文件夹只需在 md 文件里使用![title](图片名.jpg)，无需路径名就可以插入图片。

4.12 首页显示文章摘要（阅读全文）及配图（文章内不重复显示）

打开themes/next/下的_config.yml，查找excerpt

auto_excerpt: //自动摘录enable: truelength: 150 //摘录字数read_more_btn: true //显示全文按钮

打开themes\next\layout\_macro\post.swig，在{% if is_index %}和{% if post.description and theme.excerpt_description %}之间添加如下内容

{% if post.images %}<div class="out-img-topic"><img src={{ post.images }} class="img-topic"></div>{% endif %}

向themes\next\source\css\_custom\custom.styl中添加如下内容

//文章摘要配图//图片外部的容器方框，限制图片大小.out-img-topic {display: block;max-height:500px;margin-bottom: 24px;overflow: hidden;}//图片img.img-topic {display: block ;margin-left: .7em;margin-right: .7em;padding: 0;float: right;clear: right;}

将摘要图片储存于themes\next\source\images中，建议在此路径下单独建一个文件夹存放摘要图片，这个图片和文章中插图的存放路径不同，不是一个概念。然后在文章YAML头信息中添加images字段，将值填为/images/imagename.jpg。

images: "images/文章摘要配图/Win10桌面.png"

4.13 给页面、侧边栏添加背景图片

打开theme/next/source/css/_custom/custom.styl，添加以下代码：

body {background: url(/images/blogbk.jpg) no-repeat;/* 背景图垂直、水平均居中 */background-position: center center;/* 当内容高度大于图片高度时，背景图像的位置相对于viewport固定 */background-attachment: fixed;/* 让背景图基于容器大小伸缩 */background-size: cover;/* 设置背景颜色，背景图加载过程中会显示背景色 */background-color: rgba(0, 0, 0, 0.5);}.sidebar {background:url(/images/sidebar.jpg);background-size: cover;background-position:center;background-repeat:no-repeat;p,span,a {color: rgba(255, 255, 255, 1);}}

4.14 文字背景以及半透明的设置

打开theme/next/source/css/_custom/custom.styl，添加以下代码：

.content {border-radius: 20px; //文章背景设置圆角padding: 30px 60px 30px 60px;background:rgba(255, 255, 255, 0.8) none repeat scroll !important;}

4.15 去除NexT主题Markdown分割线渲染效果

修改/source/css/_common/scaffolding/base.styl，注释或删除以下内容：

background-image: repeating-linear-gradient(-45deg,white,white 4px,transparent 4px,transparent 8px);

4.16 图片可点击放大查看，放大后可关闭

打开站点配置文件_config.yml，搜索fancybox字段，设置其值为true进入到theme/text/文件夹下，打开git bashgit clone /theme-next/theme-next-fancybox3 source/lib/fancybox

4.17 博客总访问量统计

打开themes/next/下的_config.yml，查找busuanzi

busuanzi_count:enable: truetotal_visitors: falsetotal_visitors_icon: usertotal_views: falsetotal_views_icon: eyepost_views: truepost_views_icon: eye

当前版本的NexT集成的不蒜子，总访问人数和人次只是分别用icon来表示，故取消显示，自行改动

打开/themes/next/layout/_partials/footer.swig，在最后添加如下内容：

<span id="busuanzi_container_site_uv">本站访问次数：<span class="busuanzi-value" id="busuanzi_value_site_pv"></span></span>

4.18 文章末尾添加版权声明

效果：

配置：

查找主题配置文件themes/next/_config.yml中的creative_commons

creative_commons:license: by-nc-sasidebar: falsepost: true # 将false改为true即可显示版权信息language:

4.19 本地搜索（其余搜索方案的劣势只有收费）

npm install hexo-generator-search查找主题配置文件themes/next/_config.yml中的local_search

local_search:enable: true

4.20 图床和上传工具

盘点一下免费好用的图床

4.21 文章置顶

Hexo博客彻底解决置顶问题

效果：

注：若有多篇文章需要置顶，排序方式为在需要置顶的文章的Front-matter的top:填写阿拉伯数字即可，数越大，排序越靠前。

Google统计

Sitemap网站地图

提交谷歌收录本站 Google Search

文章阅读量统计

参考：

HEXO+NEXT主题个性化配置打造个性超赞博客Hexo+NexT+GitHubPages的超深度优化[EasyHexo 专栏] #2 - 魔改 Next 不完全教程基于Hexo+Node.js+github+coding搭建个人博客——进阶篇(从入门到入土)Hexo博客Next主题优化总结为NexT主题添加文章阅读量统计功能最新基于hexo搭建个人免费博客——自定义页面样式一Hexo添加文章时自动打开编辑器next主题下点击侧边栏头像回到博客首页Google Fonts 已支持思源宋体！弃暗投明-Hexo更换next主题hexo博客NEXT主题美化在hexo博客中插入图片，音乐，视频

本内容不代表本网观点和政治立场，如有侵犯你的权益请联系我们处理。

网友评论

网友评论仅供其表达个人看法，并不表明网站立场。