基于Hexo搭建个人博客——进阶篇(从入门到入土)

  • 时间:
  • 浏览:1

eg:this is a basic footnote[^1]

打开themes\next\source\css\_common\components\post\post.styl打上去以下代码:

法律依据 二:关掉字体库的引用,默认加载本地字体库,到主题配置文件设置:

<i class="fa fa-github"></i><i class="fa fa-github"></i>

<i class="fa fa-github fa-lg"></i><i class="fa fa-github fa-lg"></i>

<i class="fa fa-github fa-2x"></i><i class="fa fa-github fa-2x"></i>

使用非常简单

多说评论关闭

或者这有另六个缺陷。假使 朋友会发现在主页时显示的热度和进入博客后的热度不一样,那是愿因着在主页时他显示的是主页三种 页面的阅读量,而完整篇 都是博客的阅读量,可是我朋友还要改变某些:

获取的源码即为最新文件

在文章末尾打上去:

用法如下

用谷歌愿因着火狐浏览器打开博客页面,按下F12进入调试

先点击定位按钮,或者选择元素,或者在定位出来的样式进行修改,调到某些人喜欢的样子,就像时候↓

什么时候没更新了,愿因着懒- -

前面介绍了Hexo的某些基本搭建→基于Hexo+github+coding搭建某些人博客——基础篇(从菜鸟到放弃)

对于追求装X的博主来说,基本的搭建是满足不了的,接下来分类整理了一下各方面的细节优化,包括页面字体大小、配色、背景、SEO(搜索引擎优化)、域名绑定、DNS域名解析实现负载均衡等。

关于NexT主题的可是我配置、插件都都并能在官方文档找到答案,不到 博主假使 分类整理了某些官方没为什么我提及的细节优化。

打开\themes\next\layout\index.swig文件,找到这行代码:

修改时候的样子大约是时候的:

图标网站:http://fontawesome.io/icons/

站点配置文件:

中url的值, 还要饱含是百度站长平台注册的域名(一般有www), 比如:

<span id="inline-blue">站点配置文件</span> ,<span id="inline-purple">主题配置文件</span>

朋友在/themes/hexo-theme-next/layout/_macro/目录下新建post-article.swig,把什么post.swig中的内容克隆好友过去,或者打上去后面 的统计代码,或者在/themes/hexo-theme-next/layout/post.swig后面 % import '_macro/post.swig' as post_template %中的post.swig改成post-article.swig,时候子就处理啦。假使 在主页上的博客名字下面无需有阅读人数,进入博客并能看见

,随便填另六个就行,解析记录设置另六个www和不填,线路就默认就行了,

然後在站点找到package.json, 把裏面的hexo-algolia, 換成 "hexo-algolia": "^0.2.0"

确保提交成功:

对于升级主题,朋友还要重新配置主题配置文件,不到 每次升级完整篇 都是不到 干吗?超麻烦!

但无需是所有的样式都能调,像页宽,多说评论的样式在custom.styl文件是无效的。

真是也没必要压缩代码,牺牲了性能,每次生成静态文件都太慢了,得不偿失的感觉

或者到百度站长更新一下,就像时候↓

执行hexo new page "guestbook"时候,那为什么我在博客中打上去呢?

找到\next\_config.yml下的memu,把guestbook打上去:

一般解析配置好无需能马上访问,得看人品= =,博主的是第半年 才访问到的,祝你好运

参考

http://codepub.cn/2015/04/06/Github-Pages-personal-blog-from-Octopress-to-Hexo/http://codepub.cn/2016/03/20/Hexo-blog-theme-switching-from-Jacman-to-NexT-Mist/http://www.shellsec.com/news/34054.html

去往网易云音乐搜索喜欢的音乐,点击生成外链播放器,克隆好友代码直接里装博文末尾即可,height设为0可隐藏播放器,但仍然都并能播放音乐,auto设成0可手动播放,默认是1自动播放,可把代码里装themes/next/layout/_custom/sidebar.swig文件里,播放器会显示在站点预览中

以百度为例,谷歌的太简单就不说了:

打开百度站长验证网站

法律依据 一:文件验证

时候执行hexo g就会自动压缩

但这有另六个缺点,假使 本地运行也假使 执行hexo s时候浏览器打开本地项目会太快了 了 ,愿因是每次点击另六个链接它就会重新压缩一次,可是我建议本地调试的时候把项目根目录下的package.json中的"hexo-all-minifier": "0.0.14"先删掉再调试,愿因着改成注释:

至此,git库上备份已完成。

2、接下来,处理剩余的中文信息。找到三种 地方\themes\next\languages\ 下面的语言文件zh-Hans.yml(这里以中文为例,有的习惯用英文的配置文件,道理一样,找对应位置即可)

打开时候,如图:

安装插件:

NexT作者给朋友的建议假使 使用Data Files,具体详情请戳进 Theme configurations using Hexo data files #328

前面的 function run_disqus_script(disqus_script){}三种 段,不打算显示评论数量句子,都并能同去删掉,不显示评论数量句子,不到 点击加载按钮时候,网页是无需加载来自 Disqus 的资源的。

打开themes/next/source/css/_custom/custom.styl文件打上去:

1.准备工作:公司电脑和我家电脑配置git ssh密钥连接

以下是十几只 搜索引擎的提交入口:

hexo默认的文章链接形式为domain/year/month/day/postname,默认假使 另六个四级url,或者愿因着造成url过长,对搜索引擎是十分不友好的,朋友都并能改成domain/postname的形式。编辑站点配置文件文件,修改其中的permalink字段为permalink: :title.html即可。

站点配置文件:

不到 何如把字体、页宽、按钮大小等等某些细节的东西调到某些人喜欢的样式呢?

那假使 通过浏览器元素定位,调到某些人喜欢的样式,或者加到themes/next/source/css/_custom/custom.styl文件下面。

第另六个框也是最后另六个了,三种 假使 更改图一后半主次“主题-Next.XX”,三种 比较爽直接将<a>..</a>都删掉,同样中文“主题”一会处理,删掉时候在上一行 ‘-’后面 都并能随意打上去你想显示的东西,无需显示敏感信息哟,请自重。

此时都并能使用git status查看本地文件的请况。或者对更改打上去说明更推送到git托管库上:

public内的文件都并能根据source文件夹内容自动生成的,不还要备份。某些日志、压缩、数据库等文件假使 是调试等使用,假使 还要备份。

,把站点地址更新成新的绑定的域名即可

第一次愿因着还要填写某些人信息,填完了,点击后面 的域名解析->解析设置->打上去解析,记录类型选

愿因着Github的服务器在海外,不到 愿因着把图片也里装Github显然是不科学的,或者Github的存储空间完整篇 都是局限,不到 在这里博主推荐使用七牛云储存

具体为什么我做在时候的基础篇愿因着介绍过了,详情请看→传送门

至于后面 提到的your_token可在百度站长如下位置找到↓

<p id="div-border-left-red">愿因着不到 安装成功,那愿因着假使 墙的愿因。建议下载 Node.js 直接安装。</p>

<p id="div-border-top-blue">关于更多基本操作和基础知识,请查阅 Hexo 与 NexT 官方文档.</p>

采用的是Font Awesome的图标。

先在themes/next/source/css/_custom/custom.styl中打上去以下样式:

找到themes/next/layout/_macro/post.swig,在footer时候打上去如下代码(打上去时候确保已打上去样式):

找到themes\next\layout\_macro\post.swig并打开插入以下代码:

法律依据 二:CNAME验证

的博客网址。

打开themes/next/source/css/_custom/custom.styl,把调试好的样式打上去,保存后Ctrl+F5就能看多效果了,前提是在本地运行的,下面列出博主的某些自定义样式:

修改$code-background$code-foreground的值:

安装主动推送插件:

新建

博主的是时候的↓

themes/next/source/css/_common/components/post/post-title.styl修改为:

就像时候↓

4让让我门都 家电脑生成完文章并部署到服务器上后,此时还要将新的blog源码文件更新到git托管库上,不然公司电脑上无法获取最新的文章。在本地文件中运行以下命令:

安装插件:

替换为下面的内容:

执行hexo deploy的时候,新的连接就会被推送了。这里讲一下原理:

文件,后面 填写注册的域名

用法如下:

看多了吧,三种 假使 传值传过去的,你想显示什么就在这后面 大肆的去改动吧。其真是第六个框中,就都并能把值都改掉,无需接受传值的法律依据 ,完整篇 某些人都并能重写。不过我不建议那样做,愿因着传值时候只假使 后续页面还要这十几只 值不到 就完整篇 都是通过取值去传过去,假使 在刚才footer文件中直接写死,后续不一定哪个页面还要传值,或者值为空了愿因着还是时候的,可就尴尬了。可是我还是时候改动吧。

购买玩时候进入工作台,点击域名,或者解析

记录的记录值假使 ip地址,Github提供了另六个IP地址,

把next主题配置文件中的baidu_push设置为true,就都并能了。

同样在themes/next/layout/_macro/post.swig中,在wechat-subscriber.swig时候打上去如下代码:

其次,记得查看

至此,大功告成,运行hexo clean 和 hexo g hexo s时候就都并能看多效果了

server是仓库的在线目录地址,都并能从git上直接克隆好友过来,origin是本地分支,remote add会将本地仓库映射到托管服务器的仓库上。

访问系统总是会耗费一大主次的时间在加载google字体库上,或者总是加载不成功。

eg :

原文链接: http://yangbingdong.com/2017/build-blog-hexo-advanced/

至此,我家电脑更新的备份完成。在公司电脑上使用时,只需先运行:

第另六个框 是下面侧栏的“日期 XXX”

愿因着想像我一样加东西,一定要在双大括号外面写。如:xxx{{config.author}},当然你可是我否想改彻底都并能变量都删掉,看某些人意愿。

/source/目录下新建另六个robots.txt文件,打上去下面的一段代码:

一路摸爬滚打下来也挺折腾的,不过真是满满的成就感,学到了可是我

同去还要感谢可是我可是我的大神们的文章,有某些都忘了收藏记录下来,由衷地感谢

打开/next/_config.yml,打上去以下代码:

修改\themes\next\source\css\ _variables\base.styl文件,加入自定义颜色:

3.将git的内容同步到另一台电脑:假设时候将公司电脑中的blog源码内容备份到了git上,现在我家电脑准备同步源码内容。注意,在同步前也要时候建好hexo的环境,不然同步后本地服务器运行完整篇 都是再次老出无法运行错误。在建好的环境的主目录运行以下命令:

安装hexo的sitemap网站地图生成插件:

记录值填你的

把它改成:

法律依据 一:用国内的CDN库来替代主题中的google字体库,到主题配置文件中设置默认字体库:

验证成功时候就都并能结束推送了,这里说一下,Google的收录真的快的无需无需的,第半年 就能搜得到,百度就你会 说了,不知道要等到猴年马月

接下来打上去另六个新的deploy的类型:

缺陷: CPU占用缺陷

1、找到 \themes\next\layout\partials\下面的footer.swig文件,打开会发现,如下图的句子:

2.上传blog到git:此项建议先在blog进度最新的PC上进行,或者会有版本冲突,处理也比较麻烦。在PC上建立git ssh密钥连接和建立新库respo在此略过:

update:愿因着多说即将关闭,此博客将使用Disqus作为评论系统

再打开themes/next/layout/_scripts/third-party/comments/disqus.swig,还要替换时候的 Disqus 的加载的内容,愿因着希望显示评论数量,就保留 run_disqus_script('count.js') 三种 行,时候页面载入时完整篇 都是加载 disqus 的资源:

博客托管在Github和Coding,可是我某些人博客地址是Github或Coding的二级域名,不容易你都并能记住,可是我难 让百度收录,可是我可是我人都某些人注册域名,和博客地址绑定,时候假使 输入某些人申请的域名,就能跳转到博客首页,也与否真正拥有了某些人网站了

打开next/layout/_layout.swig,在</body>时候打上去如下代码:

(下图的Github地址)记录,就要在

这也是调用了Font Awesome的法律依据 。

愿因着多说即将关闭,本站启用Disqus。

既然Disqus已被墙,不到 为了对不到 梯子的同学标示友好,朋友都并能选择点击加载Disqus评论的法律依据 ,三种 问题图片貌似也得到了主题作者的关注-> (NexT5.2.0)[https://github.com/iissnan/hexo-theme-next/milestone/7]

具体做法如下:

打开themes/next/layout/_partials/comments.swig,在文件内容 <div id="disqus_thread">前面加入下面内容:

/themes/hexo-theme-next/layout/_macro/post.swig后面 的下面的位置打上去如下代码:

/themes/hexo-theme-next/languages/zh-Hans.yml的目录下(这里默认你使用的是简体中文,若是某些语言更改相应的yml就行),在memu下加一句即可:

打开themes/next/source/css/_variables/base.styl,找到以下字段并修改为大约的高度:

请看处理Hexo命令fs.SyncWriteStream问题图片

修改themes\next\source\css\_common\components\sidebar\sidebar-author.styl

站点配置文件中打上去如下代码。

reset对所拉取的文件不做任何处理,此处无需pull是愿因着本地尚有某些文件,使用pull会有某些版本冲突,处理起来也麻烦,而本地的文件完整篇 都是初始化生成的文件,较拉取的库后面 的文件而言基本无用,可是我直接丢弃。

初始化仓库:

背景的几何线条是采用的nest效果,另六个基于html5 canvas绘制的网页背景效果,非常赞!来自github的开源项目canvas-nest

打上去本地文件到仓库并同步到git上:

配置成功后,会生成sitemap.xmlbaidusitemap.xml,前者适合提交给谷歌搜素引擎,后者适合提交百度搜索引擎

百度sitemap提交如下↓

通过以上安装后,你都并能在你的模板文件后者.md文件加入以下相关的标签实现本插件的功能

字数统计:WordCount

阅读时长预计:Min2Read

总字数统计: TotalCount

第六个,是图一当中 “由Hexo驱动” 的Hexo链接,先给删掉处理跳转,愿因着想跳转当然也都并能某些人写地址,至于中文一会处理。注意删除的时候格式不到错,只把<a>...</a>标签这主次删除即可,留着另六个单引号'',或者会出错哦。

<a id="download" href="https://git-scm.com/download/win"><i class="fa fa-download"></i><span> Download Now</span>

</a>

去网址https://github.com/blog/273-github-ribbons选择某些人喜欢的样式,并克隆好友代码,打上去到themes\next\layout\_layout.swigbody标签之内即可

记得把后面 的url打上去某些人的!

在根目录下,把以下内容配置到站点配置文件中:

博主选择万网购买的域名,都并能淘宝账号登陆,时候支付宝付款

至于为什么我实名认证博主就略过了~

搜索某些人想好的域名,没被注册句子,点击购买,top顶级域名第一年假使 四元,选某些更高逼格的也都并能,看某些人喜好

,时候修改

愿因着选择