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/

(0)
上一篇 2019年9月30日 下午3:14
下一篇 2019年9月30日 下午3:43

相关推荐

  • Python

    基础语法 变量 变量存储在内存中的值。这就意味着在创建变量时会在内存中开辟一个空间。 基于变量的数据类型,解释器会分配指定内存,并决定什么数据可以被存储在内存中。 因此,变量可以指定不同的数据类型,这些变量可以存储整数,小数或字符。 变量赋值 #coding=utf-8 #!/usr/bin/python counter = 100 # 赋值整型变量 mil…

    2019年9月30日
    2.2K0
  • C++

    数据类型 基本类型 类型 关键字 布尔型 bool 字符型 char 整型 int 浮点型 float 双浮点型 double 无类型 void 宽字符型 wchar_t 其实 wchar_t 是这样来的: typedef short int wchar_t; 需要注意的是: size_t 在 C 语言中就有了。 它是一种 整型 类型,里面保存的是一个整数,…

    2019年9月30日
    1.9K0
  • 推荐一款免费的网站后门在线查杀工具

    网络安全,对于各位站长来说,现在是至关重要。网站被黑,网站被挂后门,可能会造成各种的损失。做好网络安全防护对于SEO优化也是至关重要的一步,保护好自己的网站,也能保护好自己网站的排名。这次,小编来推荐一款免费的网站后门在线查杀工具,希望对大家有帮助。 最近网站被挂马劫持风险非常之高,负责的几个网站都被植入后门和挂马,网站流量深受其害,今天为大家介绍一款在线木…

    2019年12月15日
    2.6K0
  • Linux使用杂记

    16.04开启root登录 sudo passwd root su root cd /usr/share/lightdm/lightdm.conf.d/ vim 50-unity-greeter.conf #添加 user-session=ubuntu greeter-show-manual-login=true all-guest=false #重启 re…

    2019年9月26日
    2.1K0
  • C语言

    基础 数据类型 C 中的类型可分为以下几种: 序号 类型与描述 1 基本类型: 它们是算术类型,包括两种类型:整数类型和浮点类型。 2 枚举类型: 它们也是算术类型,被用来定义在程序中只能赋予其一定的离散整数值的变量。 3 void 类型: 类型说明符 void 表明没有可用的值。 4 派生类型: 它们包括:指针类型、数组类型、结构类型、共用体类型和函数类型…

    2019年9月30日
    2.4K0
  • Pwn入坑之栈基础(1)

    内存四区 代码区 .text 这个区域存储着被装入执行的二进制机器代码,处理器会到这个区域取指令执行。 数据区 .data 也叫静态区(static area),用于存储全局变量和静态变量和常量,程序结束后由系统释放。 分为初始化的全局变量、静态变量、常量和未初始化的全局变量、静态变量、常量。 堆区 通过malloc、free或new、delete等函数动态…

    2019年9月30日
    2.1K0
  • Google Hacking

    基础技术 特殊字符 *:指代任意内容 + / -:强制(不)搜索+ / -后面的内容,不得有空格 “”:强制搜索””内部包含的内容 ():Google对()不敏感,但可以帮助使用者明确搜索语法,如intext:(password|passcode) intext:(username|userid)与intext:password | passcode int…

    2019年9月26日
    2.3K0
  • 极路由3刷openwrt

    开启开发者模式 登陆路由器管理界面 进入智能插件,选择去往插件市场 点击上方的”路由器信息” 进入高级设置,并按提示开通即可! 成功后提示:登陆地址为192.168.199.1,端口为1022,密码为登陆密码! 这时可以使用MobaXterm等终端工具连接极路由3,进入Shell界面了。 固件下载 为了避免刷机出现问题无法恢复到原来的状态, 需要先刷入一个 …

    2019年9月30日
    5.4K0
  • 俄罗斯VPS云服务器155元/3年支持支付宝

    俄罗斯VPS云服务器155元/3年支持支付宝,本方法有峰哥博客提供。工具:谷歌浏览器+谷歌浏览器上面的谷歌自动翻译。(需要翻译俄罗斯文) VPS配置如下; CPU:E5-2650 内存:512MB(实际只有458MB) 硬盘:10G(SWAP:1G) IPV4:1 构架:KVM   博主家里联通网用着还行,延迟在130~160之间 有图比基本稳定在…

    2019年11月30日
    1.4K0
  • 国外域名商DYNADOT:.BEST后缀域名免费注册

    国外域名商DYNADOT:.BEST后缀域名免费注册 .BEST后缀域名免费注册   .BEST后缀域名免费注册 目前这个码子又复活了,昨天注册了一个然后过了几分钟就凉了,刚才试了一下又能用了,需要的赶快去注册一个了! Ps:这家注册/登录的验证码比较沙雕,需要大写字母! 活动地址:https://www.dynadot.com/community…

    2019年11月30日
    2.0K0
  • 海外性价比高的私人代理IP购买推荐

    我们在使用各种外链群发软件比如senuke tng scrapebox或者社交营销软件比如instadub pinblster等,都要求我们配合私人代理IP,这里我们推荐一家国外主流的私人代理销售网站,我们自己每月也在使用,非常不错。 网站地址:http://buyproxies.org/ 网站目前提供的代理支持各种外链群发软件,同时指出google  fa…

    2019年11月4日
    3.2K0
  • 关于BT服务器面板主题皮肤优化

    下面是 “关于宝塔服务器面板主题皮肤优化“ 的效果展示图,由娜云制作。小编只是转载。小编也希望大家用得开心,用得赏心悦目,以前那老土朴素的界面真的可以换一换皮肤了。 登陆界面 面板首页 文件管理 BTPanel 模板文件下载 使用方法: 1.解压覆盖到/www/server/panel/BTPanel/ 2.进入SSH,输入bt,选择9,清空面板缓存 3.清…

    2019年11月23日
    2.1K0