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

相关推荐

  • 极路由3刷openwrt

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

    2019年9月30日
    4.9K0
  • CTF签到之html信息隐藏

    出题形式 Flag隐藏在html文件中,此类题目比较隐蔽,不易发现! 题目制作 1.新建1.html文档 <!DOCTYPE html> <html> <head> <title>请寻找Flag值</title> </head> <body> <h1>我就是一个简…

    2019年9月30日
    3.6K0
  • 靶机渗透之抓住阿三

    学习目的 SQL注入 图片马上传 文件包含漏洞利用 反弹Shell 权限提升 靶机搭建 下载链接 提取码: e436 网络配置:选择默认的桥接方式即可! 主机发现 ip发现 nmap -sP 192.168.43.1/24 Nmap scan report for 192.168.43.127 Host is up. 端口和服务识别 nmap -p- -A …

    2019年9月30日
    2.6K0
  • VIRMACH:黑色星期五活动VPS

    今天,小编继续来推荐外贸建站服务器VPS。VIRMACH:黑色星期五活动VPS。 黑色星期五活动VPS 需要的可以去看一看,附上实时更新的监控! 地址:http://virma.ch/2019bf  

    2019年11月30日
    1.8K0
  • 关于图片优化:免费图片压缩工具下载

    这次,小编给大家带来的是 ”关于图片优化:免费图片压缩工具下载“。希望对大家做SEO优化的小伙伴们有所帮助,希望能提升小伙伴们网站的打开与读取速度哈。 分享一个免费图片压缩工具软件,压缩图片大小体积质量不缩水。 这款名叫:瑞影无损图片压缩大师V1.4 中文汉化版压缩工具,可以无损批量压缩图片。 对图片压缩有需求的朋友可以下载使用。   网盘地址:h…

    2019年12月15日
    1.8K0
  • 萌萌哒网络聊天室:Fiora聊天室安装与使用教程

    说明:Fiora是一款偏二次元的Web多人在线聊天应用,使用Node.js、Mongodb、Socket.io和React编写,使用起来还行,挺简洁的,这里水个搭建教程,有兴趣的可以玩玩。 截图 功能 好友,群组,私聊,群聊 文本,图片,代码,url等多种类型消息 贴吧表情,滑稽表情,搜索表情包 桌面通知,声音提醒,语音播报 自定义桌面背景,主题颜色,文本颜…

    2019年11月16日
    2.5K0
  • Shell脚本编程

    简介 Shell 是一个用 C 语言编写的程序,它是用户使用 Linux 的桥梁。Shell 既是一种命令语言,又是一种程序设计语言。 Shell 是指一种应用程序,这个应用程序提供了一个界面,用户通过这个界面访问操作系统内核的服务。 业界所说的 shell 通常都是指 shell 脚本,Shell 脚本(shell script),是一种为 shell 编…

    2019年9月30日
    2.0K0
  • SEO内容检测神器:摩天楼SEO内容助手工具

    SEO内容检测神器:摩天楼SEO内容助手工具。这是我们老师:无忧老大推荐的。小编也亲测过,好使。真的能很详细地检测出来文章的内容质量度,明显是比乐观号要好很多很多。但是这个价格是有点高,小编正在犹豫是否要购买。但是小编最近是转换了工作,在外贸公司做独立站运营与谷歌SEO,所以比较少接触百度SEO了,购买计划先推迟一下下吧。但这个工具确实强大。 说到摩天楼内容…

    2019年12月15日
    2.4K0
  • 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日
    1.9K0
  • 关于BT服务器面板主题皮肤优化

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

    2019年11月23日
    1.9K0
  • 国外VPS购买推荐帖子:RADWEBHOSTING

    国外VPS购买推荐帖子:RADWEBHOSTING,本方法由峰哥博客提供。工具:谷歌浏览器+谷歌浏览器上面的谷歌自动翻译。(谷歌翻译英文嘛,但博主英文好,是不需要翻译英文的,啊哈哈哈哈哈) 活动配置如下; 内存:1024MB Cpu:1 × 2.6GHz + 硬盘:20GB RAID 10 流量:1000GB IP:1个专用IPv4 IPV6:64 IPv6…

    2019年11月30日
    1.1K0
  • IDA入坑指南

    快捷键 Tab 汇编指令与伪代码之间切换 G 搜索地址或者符号 N 重命名 X 交叉引用 space 切换反汇编窗口(列表视图&图形视图) Ctrl+S jmp to segment Alt+t 文本搜索 ALT+B 搜索16进制 Shift + F12 搜索字符串 R/H 10进制 和 十六进制 进行转换 Ctrl + E 查看函数模板表 shif…

    2019年9月30日
    1.9K0