1. 首页
  2. 技术小贴

About A Blog

博客的搭建

技术小贴
技术小贴

环境安装

  1. 安装git
  2. 安装node.js
  3. 安装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 id="footer">
  <div class="footer-left">
    <%= __('footer.copyright') %> &copy; <%= 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

这时在浏览器可以看到如下效果:

About A Blog

解除外链限制

默认情况下,hexo不支持加载外链的图片,如微博图床等

这时需要修改themescactuslayout_partialhead.ejs,在里面加入如下代码:

<meta name="referrer" content="no-referrer" />

修改目录样式

原样式

About A Blog

定位到具体文件

About A Blog

估计这应该就是layout下的footer.ejs了

最后定位到layout/_partial/action_mobile.ejslayout/_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>

现在的样式:

About A Blog

文件加密访问

实现效果:

一旦你输入了正确的密码,你可以在接下来的 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

配置百度流量统计

  1. 登录 百度统计,定位到站点的代码获取页面
  2. 复制 hm.js? 后面那串统计脚本 id,如下图所示:
    在这里插入图片描述
  3. 编辑主题配置文件, 修改字段 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/

联系我们

176-888-72082

在线咨询:点击这里给我发消息

邮件:2668888288@qq.com

工作时间:周一至周五,9:00-18:00,节假日休息

QR code