博客的搭建
<img />技术小贴
环境安装
安装git
安装node.js
安装hexo
npm install -g hexo-cli
测试是否成功安装
$ hexo -v
hexo: 3.4.2
生成博客雏形
cd进入一个博客的目录,如D:My Blog
初始化博客
hexo init
hexo**将这个文件夹初始化成一个博客专用文件夹，生成过程稍微要点时间，耐心等待。
生成静态页面
hexo g
生成结束后，**多出一个public的文件夹，这个文件夹就是hexo生成的一个完整的静态网站，也就是我们的博客
开启服务器
hexo s
然后打开浏览器，输入 localhost:4000就可以浏览我们的博客了。
部署到Github
使用远程部署需要先安装hexo-deployer-git
运行命令：
npm install hexo-deployer-git --save
修改_config.yml：
deploy:
type: git
repo: https://github.com/shavchen/shavchen.github.io.git
branch: master
部署到github仓库
hexo d
这时访问shavchen.github.io就可以看到刚才的博客雏形了！
使用catcus主题
Clone主题文件
https://github.com/probberechts/hexo-theme-cactus.git
修改博客配置文件
theme: cactus
本地浏览
hexo g
hexo s
访问127.0.0.1:4000
博客的优化
添加版权
安装插件：
npm install hexo-addlink --save
在博客配置文件中添加如下内容：
# 版权
addlink:
before_text: __本文作者__：shavchen<br />__本文地址__：
after_text: <br />__版权声明__：本博客所有文章除特别声明外，均采用 [CC BY-NC-SA 3.0 CN](http://creativecommons.org/licenses/by-nc-sa/3.0/cn/) 许可协议。转载请注明出处！
去掉导航
nav:
Home: /
About: /about/
Writing: /archives/
Categories: /categories/
去掉脚注
修改themescactuslayout_partialfooter,ejs
<footer >
<div >
<%= __('footer.copyright') %> © <%= new Date().getFullYear() %> <%= config.author || config.title %>
</div>
</footer>
这样在blog底部就没有导航栏信息了
自动生成目录
修改博客配置文件
category_dir: categories
修改主题配置文件
Categories: /categories/
生成categories目录
hexo page categories
这是**在source目录下生成categories文件夹,并且里面存在index.md
修改categories目录下的index.md
---
title: categories
date: 2019-07-16 11:14:55
type: "categories"
comment: false
---
修改scaffolds模板
将post.md修改为：
---
title: {{ title }}
date: {{ date }}
tags:
categories:
author:
---
新建文章测试
hexo n post “test”
去source/_posts文件夹修改test.md,如：
tags:
- security experiment
- zhiliaotang
categories: study
部署文章
hexo g
hexo s
这时在浏览器可以看到如下效果：
<img />
解除外链限制
默认情况下，hexo不支持加载外链的图**,如微博图床等
这时需要修改themescactuslayout_partialhead.ejs,在里面加入如下代码:
<meta />
修改目录样式
原样式
<img />
定位到具体文件
<img />
估计这应该就是layout下的footer.ejs了
最后定位到layout/_partial/action_mobile.ejs和layout/_partial/action_desktop.ejs
desktop端源代码：
<span ><%= __('post.desktop.previous') %></span>
<span ><%= __('post.desktop.next') %></span>
<span ><%= __('post.desktop.back_to_top') %></span>
<span ><%= __('post.desktop.share') %></span>
修改为：
<span ><%= __('上一篇') %></span>
<span ><%= __('下一篇') %></span>
<span ><%= __('返回顶部') %></span>
<span ><%= __('分享文章') %></span>
mobile端源代码：
<div >
<a ><i ></i> <%= __('post.mobile.menu') %></a>
<a ><i ></i> <%= __('post.mobile.toc') %></a>
<a ><i ></i> <%= __('post.mobile.share') %></a>
<a ><i ></i> <%= __('post.mobile.back_to_top') %></a>
</div>
修改为：
<div >
<a ><i ></i> <%= __('菜单') %></a>
<a ><i ></i> <%= __('目录') %></a>
<a ><i ></i> <%= __('分享') %></a>
</div>
现在的样式：
<img />
文件加密访问
实现效果：
一旦你输入了正确的密码，你可以在接下来的 30 分钟内，无需密码访问该网页。
安装插件：
npm install --save hexo-blog-encrypt
启用插件：
在 _config.yml 中添加如下内容：
# Security
##
encrypt:
enable: true
在文章头部加上对应的字段,如下：
---
title: hello world
date: 2016-03-30 21:18:02
tags:
- fdsafsdaf
password: Mike
abstract: Welcome to my blog, enter password to read.
message: Welcome to my blog, enter password to read.
---
对TOC进行加密：
在article.ejs中添加如下内容：
<% if(post.toc == true){ %>
<div <% if (post.encrypt == true) { %> <% } %>>
<strong >Index</strong>
<% if (post.encrypt == true) { %>
<%- toc(post.origin) %>
<% } else { %>
<%- toc(post.content) %>
<% } %>
</div>
<% } %>
<%- post.content %>
修改加密模板：
# Security
##
encrypt:
enable: true
default_abstract: the content has been encrypted, enter the password to read.</br>
default_message: Please enter the password to read.
default_template:
<script regexp">/cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div string">">
<div string">">
<input string">" string">" string">" string">" />
<label string">">{{message}}</label>
<div string">"></div>
</div>
</div>
<div string">" string">">{{decryptionError}}</div>
<div string">" string">">{{noContentError}}</div>
<div string">" string">">
{{content}}
</div>
default_abstract : 这个是指在文章列表页，我们看到的加密文章描述。当然这是对所有加密文章生效的。
default_message : 这个在文章详情页的密码输入框上方的描述性文字。
default_template : 这个是指在文章详情页，我们看到的输入密码阅读的模板，同理，这个也是针对所有文章的
配置Disqus评论
catcus主题默认支持Disqus评论系统，去官网注册，获取shortname，之后修改主题配置文件中的shortname即可。
只不过Disqus需要科学上网才能正常使用！
配置Valine评论
1) 官网注册，并获取appId和appKey
2) 修改layout_partialcomment.ejs
<% if(page.comments && theme.disqus.enabled){ %>
<div class="blog-post-comments">
<div id="disqus_thread">
<noscript><%= __('comments.no_js') %></noscript>
</div>
</div>
<% } %>
<% if(page.comments && theme.plugins.disqus_shortname){ %>
<!-- <div id="ad-box">
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins
></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div> -->
<script src="//cdn1.lncld.net/static/js/3.0.4/av-min.js"></script>
<script src='//unpkg.com/valine/dist/Valine.min.js'></script>
<div class="blog-post-comments"></div>
<script>
new Valine({
el: '.blog-post-comments',
app_id: 'DgMf1NChRFNzPlOrKd3gpBPk-gzGzoHsz', //修改为自己的Id
app_key: 'rFtTafou49X7djrYTj4AN96G', //修改为自己的Id
placeholder: '说点什么?', // 留言框占位提示文字
avatar:'retro',
notify:true,
verify:true
});
</script>
<% } %>
3）修改主题配置文件
plugins:
disqus_shortname: cactus-shavchen # Disqus Comments Shortname
# Valine comment system. https://valine.js.org
valine:
enable: true
visitor: false
appId: DgMf1NChRFNzPlOrKd3gpBPk-gzGzoHsz # your leancloud appId
appKey: rFtTafou49X7djrYTj4AN96G # your leancloud appKey
notify: false # Mail notify
verify: false # Verify code
avatar: mm # Gravatar style : mm/identicon/monsterid/wavatar/retro/hide
placeholder: Just go go # Comment Box placeholder
guest_info: nick,mail,link # Comment header info
pageSize: 10 # comment list page size
配置百度流量统计
登录 百度统计，定位到站点的代码获取页面
复制 hm.js? 后面那串统计脚本 id，如下图所示：
<img />
编辑主题配置文件， 修改字段 baidu_analytics，值设置成你的百度统计脚本 id。
配置不蒜子访客统计
1）修改layout_partialscripts.ejs
//在末尾添加
<script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
2）修改layoutpost.ejs
<article class="post" itemscope itemtype="http://schema.org/BlogPosting">
<header>
<%- partial('_partial/post/title', { post: page, index: false, class_name: 'posttitle' }) %>
<div class="meta">
<span class="author" itemprop="author" itemscope itemtype="http://schema.org/Person">
<span itemprop="name"><% if (page.author) { %><%- page.author %><% } else { %><%- config.title %><% } %></span>
</span>|
<%- partial('_partial/post/date', { post: page, class_name: 'postdate' }) %>
<div >
<i ></i>
<script async ></script>
<span >
<span >0</span>
</span>
</span>
</div>
<%- partial('_partial/post/category') %>
<%- partial('_partial/post/tag') %>
</div>
</header>
<%- partial('_partial/post/gallery') %>
<div >
<%- page.content %>
</div>
</article>
<%- partial('_partial/comments') %>
3) 修改layoutindex.ejs
<section id="about">
<% if (config.description) { %>
<%- markdown(config.description) %>
<% } %>
<p style="display: inline">
<span>
<i class="fas fa-eye"></i>
<!-- PV: -->
<span id="busuanzi_container_site_pv" style="display: inline;">
<span id="busuanzi_value_site_pv">0</span>
</span>|
<% if (theme.social_links) { %>
...
</span>
</p>
</section>
原创文章，作者：小嵘源码，如若转载，请注明出处：https://www.lcpttec.com/about-a-blog/
