前文:Windows下经过GitHub+Hexo搭建我的博客的步骤;
博主的我的博客:https://hunter1023.github.io/ 按照本篇博客美化。css
在 Hexo 中有2份主要的配置文件,其名称都是_config.yml
。 其中,一份位于博客根目录下,主要包含 Hexo 自己的配置;另外一份位于themes/next/
目录下,用于配置主题相关的选项。html
打开根目录下的_config.yml
android
# Site title: 特叔服务 subtitle: keywords: author: Hunter description: Tough times never last, but tough people do.
顾名思义,所谓主题就是界面的展现样式。Hexo安装主题,只须要将主题文件拷贝至博客所在目录的themes
目录下,修改相关配置文件便可生效。git
博客所在目录下打开git bash
,再经过Git clone https://github.com/theme-next/hexo-theme-next themes/next
便可完成。github
打开根目录下的_config.yml
,查找theme
字段,将字段改成theme: next
(冒号:
以后要有空格分隔,不然无效) ,以后经过hexo g
和hexo s
,再在浏览器中访问localhost:4000
便可本地预览主题效果。web
打开themes/next/
下的_config.yml
,查找scheme
,能够看到以下四种不一样的风格方案:npm
scheme: Muse #scheme: Mist #scheme: Pisces #scheme: Gemini
去掉#
注释,即启用对应的scheme,博主采用Muse主题,你们能够依次测试效果,选择本身喜欢的scheme。json
博客框架默认的语言是英文,前往/themes/next/languages
,查看当前NexT版本简体中文对照文件的名称是zh-Hans
仍是zh-CN
。canvas
再前往根目录下的_config.yml
,查找language
,设置成language: zh-Hans
或language: zh-CN
,即显示简体中文。windows
打开themes/next/
下的_config.yml
,查找menu
menu: home: / || home #about: /about/ || user tags: /tags/ || tags categories: /categories/ || th archives: /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: 2017-12-14 13:05:38 type: "categories" comments: false ---
注:若是有启用评论,默认页面带有评论。须要关闭的话,添加字段comments并将值设置为false。
打开**themes/next/
下的_config.yml
**,查找since
footer: # Specify the date when the site was setup. # If not defined, current year will be used. #since: 2015
若是不设置,默认显示当前年份。
打开themes/next/
下的_config.yml
,查找avatar
# Sidebar Avatar # in theme directory(source/images): /images/avatar.gif # in site directory(source/uploads): /uploads/avatar.gif avatar: http://XXXXXXXXX
avatar
的值是图片的连接地址(完整的URI 或者 站内的相对地址皆可)
地址 | 值 |
---|---|
完整的URI | http://example.com/avatar.png |
站点内地址 | 图片放至themes/next/source/images/ 配置为:avatar: /images/图片名 |
站点内地址 | 图片放至根目录下source/uploads/ (初始无uploads文件夹,自行建立)目录下配置为:avatar: /uploads/图片名 |
以后建立博文,对图片的引用 一样能够按照上述地址获取。
/themes/next/source/images/
下themes/next/
下的_config.yml
**,查找favicon
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: /images/manifest.json #ms_browserconfig: /images/browserconfig.xml修改small和medium的路径为下载的图标路径
git clone https://github.com/theme-next/theme-next-three source/lib/three
themes/next/_config.yml
中查找theme-next-three
,将想要的效果改成true便可:# three_waves three_waves: false # canvas_lines canvas_lines: true # canvas_sphere canvas_sphere: false
打开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样式属性均可以根据图片修改,以达到满意的效果。
默认状况下,侧栏仅在文章页面(拥有目录列表)时才显示,并放置于右侧位置。打开themes/next/
下的_config.yml
,查找sidebar
sidebar: position: left #position: right
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;
#post - 默认行为,在文章页面(拥有目录列表)时显示 #always - 在全部页面中都显示 #hide - 在全部页面中都隐藏(能够手动展开) #remove - 彻底移除 display: post #display: always #display: hide #display: remove
打开themes/next/layout/source/js/src/motion.js
,找到以下代码处,更换close的内容
var sidebarToggleLine1st = new SidebarToggleLine({ el: '.sidebar-toggle-line-first', status: { arrow: {width: '50%', rotateZ: '45deg', top: '2px', left: '6px'}, // close: {width: '100%', rotateZ: '-45deg', top: '5px', left: '0px'} //X形 close: {width: '50%', rotateZ: '-45deg', top: '2px', left: '0px'} //箭头形 } }); var sidebarToggleLine2nd = new SidebarToggleLine({ el: '.sidebar-toggle-line-middle', status: { arrow: {width: '90%'}, // close: {opacity: 0} //X形 close: {width: '90%'} //箭头形 } }); var sidebarToggleLine3rd = new SidebarToggleLine({ el: '.sidebar-toggle-line-last', status: { arrow: {width: '50%', rotateZ: '-45deg', top: '-2px', left: '6px'}, // close: {width: '100%', rotateZ: '45deg', top: '-5px', left: '0px'} //X形 close: {width: '50%', rotateZ: '45deg', top: '-2px', left: '0px'} //箭头形 } });
修改/themes/next/layout/_macro/post.swig
,搜索 rel="tag">#
,将 #
换成 <i class="fa fa-tag"></i>
打开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); }
经过这个脚本,咱们用其来监听hexo new
这个动做,并在检测到hexo new
以后,执行编辑器打开的命令。
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); });
修改/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>
themes/next/
下的_config.yml
,查找font
font: enable: true # Uri of fonts host. E.g. //fonts.googleapis.com (Default). 修改成墙内镜像 host: https://fonts.loli.net global: external: true family: 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')
_config.yml
,搜索post_asset_folder
字段,设置其值为true
npm install hexo-asset-image --save
hexo new "fileName"
会在/source/_posts
目录下建立同名的文件夹![title](图片名.jpg)
,无需路径名就能够插入图片。themes/next/
下的_config.yml
,查找excerpt
auto_excerpt: //自动摘录 enable: true length: 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"
打开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);} }
打开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; }
修改/source/css/_common/scaffolding/base.styl
,注释或删除如下内容:
background-image: repeating-linear-gradient( -45deg, white, white 4px, transparent 4px, transparent 8px );
_config.yml
,搜索fancybox
字段,设置其值为true
theme/text/
文件夹下,打开git bash
git clone https://github.com/theme-next/theme-next-fancybox3 source/lib/fancybox
themes/next/
下的_config.yml
,查找busuanzi
busuanzi_count: enable: true total_visitors: false total_visitors_icon: user total_views: false total_views_icon: eye post_views: true post_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>
效果:
配置:
查找主题配置文件themes/next/_config.yml
中的creative_commons
creative_commons: license: by-nc-sa sidebar: false post: true # 将false改成true便可显示版权信息 language:
npm install hexo-generator-search
themes/next/_config.yml
中的local_search
local_search: enable: true
Hexo博客完全解决置顶问题
效果:
注:如有多篇文章须要置顶,排序方式为 在须要置顶的文章的Front-matter
的top:
填写阿拉伯数字便可,数越大,排序越靠前。
参考: