1博客搭建
直接传送到我自己的博客的传送门
移动端可能会有点丑，因为我还没有对他进行优化。。。
1.1环境准备
1.1.1已经安装Node.js
1.1.2已有GitHub账户
1.1.3已安装Git
1.2github page 配置
1.2.1新建仓库
项目名必须严格遵守格式用户名.github.io格式，不然可能会有许多不必要的麻烦。并且勾选Initialize this repository with a README。
1.3本地构建
1.3.1安装hexo
在任意磁盘安装hexo，我就是选择在G盘新建了一个blogs文件夹，在里面下载。
通过命令行进入对应位置
输入npm install hexo -g，开始安装Hexo
在输入hexo -v检查是否成功安装hexo
成功安装显示样式
输入hexo init对文件夹进行初始化，初始化之前请确保文件夹为空，否则将无法正常进行初始化。
输入npm install安装相关插件
输入hexo g，进行生成静态文件，再输入hexo s就可以进行本地预览了。
hexo s
预览成功显示样式
问题：假如页面一直无法跳转，那么可能端口被占用了。此时我们ctrl+c停止服务器，接着输入“hexo server -p 端口号”来改变端口号，再次进行预览就可以了。
1.3.2将Hexo与Github page联系起来
设置Git的user name和email（如果是第一次的话）
在当前文件夹下右键Git Bash Here ，输入
$ git config --global user.name "hansybx"// 你的github用户名，非昵称
$ git config --global user.email "xxx@qq.com"// 填写你的github注册邮箱
输入cd ~/.ssh，检查是否有.ssh的文件夹
输入ls，列出该文件下的内容。下图说明存在
成功示例
输入ssh-keygen -t rsa -C "xxx@qq.com"，连续三个回车，生成密钥，最后得到了两个文件：id_rsa和id_rsa.pub（默认存储路径是：C:\Users\Administrator.ssh）。
登录Github，点击头像下的settings，在点击 SSH and GPG keys 去新建一个ssh keys。title随便取，将id_rsa.pub文件里的内容复制到key中。
输入ssh -T git@github.com，测试添加ssh是否成功。如果看到Hi后面是你的用户名，就说明成功了.
成功示例
1.3.2本地文件配置
配置Deployment，在其文件夹中，找到_config.yml文件，修改repo值
示例
github.io.git前的用户名更改为自己的github账户名即可
2.主题选择
2.1关于主题，我选择了NexT，原因有以下几个：
1.首先是因为它是一个非常简洁干净的一个框架
2.其次是它在GitHub上的star数非常高，而且使用它的人数非常之多，这样当我们在遇到问题时可以获得很多的解决办法。
3.NexT官方文档传送门
2.2主题更换
在博客所在目录下的theme文件夹下使用
git clone https://github.com/theme-next/hexo-theme-next.git next
在使用hexo初始化的文件夹下的_config.yml即站点配置文件中进行主题更换，在theme/next文件夹下的_config.yml即主题配置文件中进行主题的修改。
因此我们在站点配置文件下进行一下修改：
主题更换
3主题美化
3.1添加标签分类等页面
menu:
home: / || home #首页及其对应图标
tech: /categories/tech/ ||anchor #对应分类及图标
life: /categories/life/ ||tree #对应分类及图标
archives: /archives/ || archive #归档
about: /about/ || grav #关于页面
3.2侧边栏社交链接
# Social Links
# Usage: `Key: permalink || icon`
# Key is the link label showing to end users.
# Value before `||` delimiter is the target permalink.
# Value after `||` delimiter is the name of FontAwesome icon. If icon (with or without delimiter) is not specified, globe icon will be loaded.
social:
GitHub: https://github.com/Hansybx || github
简书: https://www.jianshu.com/u/37e9e69cd517 || book
#E-Mail: mailto:yourname@gmail.com || envelope
#Weibo: https://weibo.com/yourname || weibo
#Google: https://plus.google.com/yourname || google
#Twitter: https://twitter.com/yourname || twitter
#FB Page: https://www.facebook.com/yourname || facebook
#VK Group: https://vk.com/yourname || vk
#StackOverflow: https://stackoverflow.com/yourname || stack-overflow
#YouTube: https://youtube.com/yourname || youtube
#Instagram: https://instagram.com/yourname || instagram
#Skype: skype:yourname?call|chat || skype
social_icons:
enable: true
icons_only: false
transition: false
显示示例
3.3底部显示建站时间和图标修改
修改主题配置文件
# Specify the date when the site was setup
since: 2018 # 建站年份
# icon between year and author @Footer
authoricon: snowflake-o #图标会显示为一个雪花的样式
3.4统计网站与文章的浏览人数及次数
首先修改主题配置文件中的自带的不蒜子统计功能
busuanzi_count:
enable: falsse
total_visitors: true
total_visitors_icon: user
total_views: true
total_views_icon: eye
post_views: true
post_views_icon: eye
接着修改\themes\next\layout\_third-party\analytics文件下的busuanzi_count.swig文件如下：
{% if theme.busuanzi_count.enable %}
<div class="busuanzi-count">
<script async src="https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
{% if theme.busuanzi_count.total_visitors %}
<span class="post-meta-item-icon">
<i class="fa fa-{{ theme.busuanzi_count.total_visitors_icon }}"></i>
</span>
<span class="site-uv" title="{{ __('footer.total_visitors') }}">
已有<span class="busuanzi-value" id="busuanzi_value_site_uv"></span>人访问
</span>
{% endif %}
{% if theme.busuanzi_count.total_visitors and theme.busuanzi_count.total_views %}
<span class="post-meta-divider">|</span>
{% endif %}
{% if theme.busuanzi_count.total_views %}
<span class="post-meta-item-icon">
<i class="fa fa-{{ theme.busuanzi_count.total_views_icon }}"></i>
</span>
<span class="site-pv" title="{{ __('footer.total_views') }}">
总访问<span class="busuanzi-value" id="busuanzi_value_site_pv"></span>次
</span>
{% endif %}
</div>
{% endif %}
3.5GitHub Corners实现
这里有样式1和样式2两种样式，选择自己喜欢的，将源码复制后粘贴到themes/next/layout/_layout.swig文件中(放在<div class="headband"></div>的下面)，并把href改为你的github地址。代码如下：
<div class="{{ container_class }} {% block page_class %}{% endblock %}">
<div class="headband"></div>
<a href="https://github.com/Hansybx" class="github-corner" aria-label="View source on GitHub"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#222222; color:#fff; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>
<header id="header" class="header" itemscope itemtype="http://schema.org/WPHeader">
<div class="header-inner">{% include '_partials/header/index.swig' %}</div>
</header>
3.6时间轴的页面分隔
ps：这里以category为例，tag也是一样的原理
3.6.1category
文件位置/themes/next/layout/category.swig,进行如下修改
{% block content %}
{######################}
{### CATEGORY BLOCK ###}
{######################}
<div class="post-block category">
<div id="posts" class="posts-collapse">
<div class="collection-title">
<{% if theme.seo %}h2{% else %}h1{% endif %}>{#
#}{# page.category #}{#
#}{#<small>{{ __('title.category') }}</small>#}
</{% if theme.seo %}h2{% else %}h1{% endif %}>
</div>
{% for post in page.posts %}
{# Show year #}
{% set year %}
{% set post.year = date(post.date, 'YYYY') %}
{% if post.year !== year %}
{% set year = post.year %}
<div class="collection-title">
<h2 class="archive-year motion-element" id="archive-year-{{ year }}">{{ year }}</h2>
</div>
{% endif %}
{# endshow #}
{{ post_template.render(post) }}
{% endfor %}
</div>
</div>
{##########################}
{### END CATEGORY BLOCK ###}
{##########################}
{% include '_partials/pagination.swig' %}
{% endblock %}
{% block sidebar %}
{{ sidebar_template.render(false) }}
{% endblock %}
{% block script_extra %}
{% if theme.use_motion %}
<script type="text/javascript" id="motion.page.archive">
$('.archive-year').velocity('transition.slideLeftIn');
</script>
{% endif %}
{% endblock %}
3.6.2tag
修改文件/themes/next/layout/tag.swig，修改方法一样。
3.7修改主题的scheme
'#'为注释，修改scheme前的#，即可改变主题的scheme
# Schemes
#scheme: Muse
scheme: Mist
#scheme: Pisces
#scheme: Gemini
3.8修改侧边栏位置
3.8.1 Pisces 或Gemini
这两个scheme是可以直接在主题配置文件中修改显示位置的，下面就是侧边栏在右面的代码
sidebar:
# Sidebar Position, available values: left | right (only for Pisces | Gemini).
#position: left
position: right
3.8.2 Muse 或 Mist
这两个scheme是不支持在主题配置文件中修改的，他们的侧边栏是默认在右侧的，下面是将它修改到左侧的方法。直接修改对应文件即可。
1.sidebar.styl
路径：.\themes\next\source\css\_common\components\sidebar\
将此文件的第3行right改为left
.sidebar {
position: fixed;
left: 0;
top: 0;
bottom: 0;
2.sidebar-toggle.styl
路径：.\themes\next\source\css\_common\components\sidebar\
同样将第3行冒号前的right改为left
left: $b2t-position-right;
3.back-to-top.styl
路径：.\themes\next\source\js\src\motion.js
利用搜索功能找到改文档中的paddingRight字段，将paddingRight改为paddingLeft(共两处)。
4.bug修改
找到./themes/source/js/src/motion.js文件，在$(document).ready(function (){})内添加内容：
$(document).ready(function () {
window.onload=function(){
var bwol=document.body.offsetWidth;
if(bwol < 975){
$('aside#sidebar').css("display","none");
$('body').css("paddingLeft","0px");
}
}
window.onresize = function(){
var bwos=document.body.offsetWidth;
bwos < 975 && $('body').velocity('stop').velocity({paddingLeft: 0},0);
if($('aside#sidebar').css('display') != 'none' && $('aside#sidebar').css('width')!='0px')
$('body').velocity('stop').velocity({paddingLeft: 350},0);
}
NexT.motion = {};
...
网友评论