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

  • 时间:
  • 浏览:2
  • 来源:UU快3—全天最准大发快三

第一三个小,是图一当中 “由Hexo驱动” 的Hexo链接,先给删掉正确处理跳转,时候 想跳转当然都后能 能此人 写地址,至于中文一会正确处理。注意删除的时候格式只能错,只把<a>...</a>标签这每项删除即可,留着有一一一一三个小单引号'',时候 会出错哦。

用法如下:

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

采用的是Font Awesome的图标。

在文章末尾再加:

接下来再加有一一一一三个小新的deploy的类型:

一路摸爬滚打下来也挺折腾的,不过我觉得满满的成就感,学到了好多好多

一并须要感谢好多好多 好多好多 的大神们的文章,有一些都忘了收藏记录下来,由衷地感谢

对于升级主题,他们歌词 儿须要重新配置主题配置文件,这么每次升级都不 这么干吗?超麻烦!

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

以下是哪几块搜索引擎的提交入口:

博客托管在Github和Coding,好多好多 此人 博客地址是Github或Coding的二级域名,不容易给你记住,也这么让百度收录,好多好多 好多好多 人都此人 注册域名,和博客地址绑定,另有一一一一三个小时候输入此人 申请的域名,就能跳转到博客首页,也算是真正拥有了此人 网站了

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

先点击定位按钮,时候 选用元素,时候 在定位出来的样式进行修改,调到此人 喜欢的样子,就像另有一一一一三个小↓

站点配置文件:

这也是调用了Font Awesome的土法子。

看多了吧,这种 却说传值传过去的,你想显示那些就在这上面大肆的去改动吧。其我觉得第一三个小框中,就后能 把值都改掉,我不多 接受传值的土法子,全版此人 后能 重写。不过我不建议那样做,时候 传值另有一一一一三个小只却说后续页面须要这哪几块值这么就总要通过取值去传过去,却说在刚才footer文件中直接写死,后续不一定哪个页面须要传值,时候 值为空了时候 还是另有一一一一三个小的,可就尴尬了。好多好多 还是另有一一一一三个小改动吧。

欠缺: CPU占用欠缺

访问系统老会 会耗费一大每项的时间在加载google字体库上,时候 老会 加载不成功。

再打开themes/next/layout/_scripts/third-party/comments/disqus.swig,须要替换另有一一一一三个小的 Disqus 的加载的内容,时候 希望显示评论数量,就保留 run_disqus_script('count.js') 这种 行,另有一一一一三个小页面载入时总要加载 disqus 的资源:

打开themes/next/source/css/_custom/custom.styl文件再加:

新建

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

时候 多说即将关闭,本站启用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">前面加入下面内容:

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

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

打开时候,如图:

/source/目录下新建有一一一一三个小robots.txt文件,再加下面的一段代码:

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

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

搜索此人 想好的域名,没被注册的话,点击购买,top顶级域名第一年时候四元,选一些更高逼格的都后能 能,看此人 喜好

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

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

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

安装插件:

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

reset对所拉取的文件不做任何正确处理,此处我不多 pull是时候 本地尚有一些文件,使用pull会有一些版本冲突,正确处理起来也麻烦,而本地的文件都不 初始化生成的文件,较拉取的库上面的文件而言基本无用,好多好多 直接丢弃。

记录的记录值却说ip地址,Github提供了有一一一一三个小IP地址,

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

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

就像另有一一一一三个小↓

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

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

修改时候的样子离米 是另有一一一一三个小的:

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

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

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

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

hexo默认的文章链接形式为domain/year/month/day/postname,默认却说有一一一一三个小四级url,时候 时候 造成url过长,对搜索引擎是十分不友好的,他们歌词 儿后能 改成domain/postname的形式。编辑站点配置文件文件,修改其中的permalink字段为permalink: :title.html即可。

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

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

,时候修改

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

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

时候 这有有一一一一三个小欠缺。却说他们歌词 儿会发现在主页时显示的热度和进入博客后的热度不一样,那是时候 在主页时他显示的是主页这种 页面的阅读量,而都不 博客的阅读量,好多好多 他们歌词 儿须要改变一些:

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

记录值填你的

把它改成:

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

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

验证成功时候就后能 开始英语 了推送了,这里说一下,Google的收录真的快的不须不须的,第三天就能搜得到,百度就你会说了,我沒有乎 要等到猴年马月

时候 Github的服务器在海外,这么时候 把图片也装下 去去去Github显然是不科学的,时候 Github的存储空间都不 局限,这么在这里博主推荐使用七牛云储存

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

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

打开百度站长验证网站

土法子一:文件验证

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

的博客网址。

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

土法子二:CNAME验证

第一次时候 须要填写此人 信息,填完了,点击上面的域名解析->解析设置->再加解析,记录类型选

参考

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

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

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

获取的源码即为最新文件

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

</a>

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

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

确保提交成功:

<p id="div-border-left-red">时候 这么安装成功,那时候 却说墙的意味着着。建议下载 Node.js 直接安装。</p>

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

先在themes/next/source/css/_custom/custom.styl中再加以下样式:

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

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

第有一一一一三个小框 是下面侧栏的“日期 XXX”

时候 想像我一样加东西,一定要在双大括号外面写。如:xxx{{config.author}},当然我想是想改彻底后能 变量都删掉,看此人 意愿。

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

多会儿没更新了,时候 懒- -

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

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

关于NexT主题的好多好多 配置、插件都后能 在官方文档找到答案,这么博主却说收集了一些官方没为什么么提及的细节优化。

,随便填有一一一一三个小就行,解析记录设置有一一一一三个小www和不填,线路就默认就行了,

站点配置文件:

NexT作者给他们歌词 儿的建议却说使用Data Files,具体详情请戳进 Theme configurations using Hexo data files #328

时候 选用

站点配置文件中再加如下代码。

使用非常简单

public内的文件后能 根据source文件夹内容自动生成的,不须要备份。一些日志、压缩、数据库等文件也都不 调试等使用,却说须要备份。

eg:this is a basic footnote[^1]

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

第有一一一一三个小框也是最后有一一一一三个小了,这种 却说更改图一后半每项“主题-Next.XX”,这种 比较爽直接将<a>..</a>都删掉,同样中文“主题”一会正确处理,删掉时候在上一行 ‘-’上面后能 随意再加你想显示的东西,不须显示敏感信息哟,请自重。

时候 到百度站长更新一下,就像另有一一一一三个小↓

安装主动推送插件:

此时后能 使用git status查看本地文件的情况表。时候 对更改再加说明更推送到git托管库上:

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

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

执行hexo new page "guestbook"时候,那为什么么博客中再加呢?

找到\next\_config.yml下的memu,把guestbook再加:

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

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

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

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

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

用法如下

替换为下面的内容:

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

他们歌词 儿在/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,另有一一一一三个小子就正确处理啦。却说在主页上的博客名字下面我不多 有阅读人数,进入博客都后能 看见

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

记得把上面的url再加此人 的!

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

百度sitemap提交如下↓

一般解析配置好不须能马上访问,得看人品= =,博主的是第三天才访问到的,祝你好运

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

字数统计:WordCount

阅读时长预计:Min2Read

总字数统计: TotalCount

请看正确处理Hexo命令fs.SyncWriteStream什么的问题

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

前面的 function run_disqus_script(disqus_script){}这种 段,不打算显示评论数量的话,后能 一并删掉,不显示评论数量的话,这么点击加载按钮时候,网页是我不多 加载来自 Disqus 的资源的。

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

但这有有一一一一三个小缺点,却说本地运行也却说执行hexo s时候浏览器打开本地项目会这么快,意味着着是每次点击有一一一一三个小链接它就会重新压缩一次,好多好多 建议本地调试的时候把项目根目录下的package.json中的"hexo-all-minifier": "0.0.14"先删掉再调试,时候 改成注释:

初始化仓库:

打开/next/_config.yml,再加以下代码:

再加本地文件到仓库并同步到git上:

这么怎样才能把字体、页宽、按钮大小等等一些细节的东西调到此人 喜欢的样式呢?

那却说通过浏览器元素定位,调到此人 喜欢的样式,时候 加到themes/next/source/css/_custom/custom.styl文件下面。

其次,记得查看

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

<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>

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

多说评论关闭

安装插件:

eg :

博主的是另有一一一一三个小的↓