博客的搭建
环境安装
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 id="footer"> <div class="footer-left"> <%= __('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 |
这时在浏览器可以看到如下效果：
解除外链限制
默认情况下，hexo不支持加载外链的图片,如微博图床等
这时需要修改themescactuslayout_partialhead.ejs,在里面加入如下代码:
<meta name="referrer" content="no-referrer" />
|
修改目录样式
原样式
定位到具体文件
估计这应该就是layout下的footer.ejs了
最后定位到layout/_partial/action_mobile.ejs和layout/_partial/action_desktop.ejs
desktop端源代码：
<span id="i-prev" class="info" style="display:none;"><%= __('post.desktop.previous') %></span> <span id="i-next" class="info" style="display:none;"><%= __('post.desktop.next') %></span> <span id="i-top" class="info" style="display:none;"><%= __('post.desktop.back_to_top') %></span> <span id="i-share" class="info" style="display:none;"><%= __('post.desktop.share') %></span> |
修改为：
<span id="i-prev" class="info" style="display:none;"><%= __('上一篇') %></span> <span id="i-next" class="info" style="display:none;"><%= __('下一篇') %></span> <span id="i-top" class="info" style="display:none;"><%= __('返回顶部') %></span> <span id="i-share" class="info" style="display:none;"><%= __('分享文章') %></span> |
mobile端源代码：
<div id="actions-footer"> <a id="menu" class="icon" href="#" onclick="$('#nav-footer').toggle();return false;"><i class="fas fa-bars fa-lg" aria-hidden="true"></i> <%= __('post.mobile.menu') %></a> <a id="toc" class="icon" href="#" onclick="$('#toc-footer').toggle();return false;"><i class="fas fa-list fa-lg" aria-hidden="true"></i> <%= __('post.mobile.toc') %></a> <a id="share" class="icon" href="#" onclick="$('#share-footer').toggle();return false;"><i class="fas fa-share-alt fa-lg" aria-hidden="true"></i> <%= __('post.mobile.share') %></a> <a id="top" style="display:none" class="icon" href="#" onclick="$('html, body').animate({ scrollTop: 0 }, 'fast');"><i class="fas fa-chevron-up fa-lg" aria-hidden="true"></i> <%= __('post.mobile.back_to_top') %></a> </div> |
修改为：
<div id="actions-footer"> <a id="menu" class="icon" href="#" onclick="$('#nav-footer').toggle();return false;"><i class="fas fa-bars fa-lg" aria-hidden="true"></i> <%= __('菜单') %></a> <a id="toc" class="icon" href="#" onclick="$('#toc-footer').toggle();return false;"><i class="fas fa-list fa-lg" aria-hidden="true"></i> <%= __('目录') %></a> <a id="share" class="icon" href="#" onclick="$('#share-footer').toggle();return false;"><i class="fas fa-share-alt fa-lg" aria-hidden="true"></i> <%= __('分享') %></a> </div> |
现在的样式：
文件加密访问
实现效果：
一旦你输入了正确的密码，你可以在接下来的 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 id="toc-div" class="toc-article" <% if (post.encrypt == true) { %>style="display:none" <% } %>> <strong class="toc-title">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 src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="hbe-security"> <div class="hbe-input-container"> <input type="password" class="hbe-form-control" id="pass" placeholder="{{message}}" /> <label for="pass">{{message}}</label> <div class="bottom-line"></div> </div> </div> <div id="decryptionError" style="display:none;">{{decryptionError}}</div> <div id="noContentError" style="display:none;">{{noContentError}}</div> <div id="encrypt-blog" style="display:none"> {{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 class="adsbygoogle" style="display:block" data-ad-client="ca-pub-1769617155450062" data-ad-slot="6920805491" data-ad-format="link" data-full-width-responsive="true"></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，如下图所示：
- 编辑主题配置文件， 修改字段 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 class="article-tag"> <i class="fas fa-eye"></i> <script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script> <span id="busuanzi_container_page_pv" style="display: inline;"> <span id="busuanzi_value_page_pv">0</span> </span> </span> </div> <%- partial('_partial/post/category') %> <%- partial('_partial/post/tag') %> </div> </header> <%- partial('_partial/post/gallery') %> <div class="content" itemprop="articleBody"> <%- 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/
微信扫一扫 
支付宝扫一扫