基于snippet主题在github上搭建博客

折腾了一通之后,还是更喜欢 snippet 主题,并且发誓不在折腾了,好吧,我开玩笑的呢!

更新

发现有些代码高亮会将空格变为 true,修改hightlight的tab_replace配置为false
1
tab_replace: false
上一页下一页显示异常(html的safe转码问题)
忘记咋修复的了,好像设置某个escape为false来着

本人也做了一个动态的不过没买服务器,如下图所示
我的动态网页

插入广告(google Ads)

步骤

到谷歌广告主页,注册和登录
打开文件 hexo-theme-snippet/layout/head.ejs 在头部加入以下代码

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>
  (adsbygoogle = window.adsbygoogle || []).push({
    google_ad_client: "ca-pub-7854187021513757",
    enable_page_level_ads: true
  });
</script>

   <script type="text/javascript">
       function IsPC() {
         var userAgentInfo = navigator.userAgent;
         var Agents = ["Android", "iPhone"];
         var flag = true;
         for (var v = 0; v < Agents.length; v++) {
           if (userAgentInfo.indexOf(Agents[v]) > 0) {
             flag = false;
             break;
           }
         }
         return flag;
       }

       //页面加载完成后在根据是否是电脑进行加载广告
       window.addEventListener('load', function () {
           // 谷歌广告
           if(IsPC()){
               var googleAds = document.getElementsByClassName('googleAd');
               if(googleAds != undefined){
                   for (var i = 0; i < googleAds.length; i++) {
                       googleAds[i].innerHTML = '<ins class="adsbygoogle"\
                            style="display:block; text-align:center;"\
                            data-ad-layout="in-article"\
                            data-ad-format="fluid"\
                            data-ad-client="ca-pub-7854187021513757"\
                            data-ad-slot="4637472251">\
                       </ins>'

                       var scriptFun = document.createElement("script");
                       scriptFun.text = "(adsbygoogle = window.adsbygoogle || []).push({});";
                       googleAds[i].appendChild(scriptFun);
                       // end
                   }
               }

           }
           .......

等待回信
在 source 目录下新建 ads.txt 内容如下

1	google.com, pub-7854187021513757, DIRECT, f08c47fec0942fa0

回信通过后,在广告->广告单元->创建新的广告单元中选择,选取要使用的样式,我选择了文章内嵌广告然后把代码加到网页中
打开 hexo-theme-snippet/layout/post.ejs 文件

<p id="process"></p>
<article class="post">
    <div class="post-head">
        <h1 id="<%= page.title %>">
            <%if(page.link){%>
	            <a href="<%- url_for(page.link) %>" target="_blank"><%= page.title %></a>
	            <%}else{%>
	            <%= page.title||'NO Title!' %>
            <%}%>
        </h1>
        <%- partial('_partial/article-meta', {post: page}) %>
            <%
                var diffDays = moment(new Date()).diff(moment(page.date), 'day');
                var warningTextArr = theme.warning.text.split("%d");
            %>
            <% if((theme.warning.days!=0) && diffDays > (theme.warning.days || 300)){ %>
            <p class="fa fa-exclamation-triangle warning">
                <%- warningTextArr[0]%><strong><%= diffDays %></strong><%- warningTextArr[1]%>
            </p>
        <% } %>
    </div>

    <%- partial('_partial/gallery',{post:page})%>

    <!-- google广告 -->
    <div class="googleAd">
        <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
    </div>

    <div class="post-body post-content">
        <%- page.content %>
    </div>
    <% if(theme.reward.alipay || theme.reward.wepay){ %>
        <%- partial('_partial/reward') %>
    <% } %>
    <div class="post-footer">
        <div>
            <% if(theme.declaration.enable){ %>
                <%- theme.declaration.title %>：<%- theme.declaration.tip %><%- theme.cc %>
            <% } %>
        </div>
        <div>
            <% if(theme.cc){ %>
                <%= __('post_licence') %>: <%- theme.cc %>
            <% } %>
        </div>
    </div>
</article>

<div class="article-nav prev-next-wrap clearfix">
    <% if(page.prev){ %>
        <a href="<%- url_for(page.prev.path) %>" class="pre-post btn btn-default" title='<%- page.prev.title %>'>
            <i class="fa fa-angle-left fa-fw"></i><span class="hidden-lg">上一篇</span>
            <span class="hidden-xs"><%- page.prev.title %></span>
        </a>
    <% } %>
    <% if(page.next){ %>
        <a href="<%- url_for(page.next.path) %>" class="next-post btn btn-default" title='<%- page.next.title %>'>
            <span class="hidden-lg">下一篇</span>
            <span class="hidden-xs"><%- page.next.title %></span><i class="fa fa-angle-right fa-fw"></i>
        </a>
    <% } %>
</div>

<!-- google广告 -->
<div class="googleAd">
    <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
</div>

<% if(page.comments){ %>
    <div id="comments">
        <%- partial('_vendor/comments/index', {page: page}) %>
    </div>
<% } %>

首页广告

修改_config.yml,在 widgets 中将-search 去掉
找到 layout/_widget/notification.ejs 文件修改内容如下

<%if(theme.notification){%>
    <div class="widget">
        <h3 class="title">广告推广</h3>
        <div class="notification">

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
     style="display:block; text-align:center;"
     data-ad-layout="in-article"
     data-ad-format="fluid"
     data-ad-client="ca-pub-7854187021513757"
     data-ad-slot="4190749692"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>
        </div>
    </div>
<%}%>

安装

下载插件:

1	git clone git://github.com/shenliyang/hexo-theme-snippet.git themes/hexo-theme-snippet

安装依赖:

1 2	npm i hexo-renderer-ejs hexo-renderer-less hexo-deployer-git -S cnpm install hexo-generator-feed --save

配置

在主_config.yml 修改主题为

1	theme: hexo-theme-snippet

注意 categories 和实际文章中的对应(包括大小写)

menu:
- page: home
  url: /
  icon: fa-home
- page: Qt
  url: /categories/Qt
  icon:
- page: Python
  url: /categories/Python
  icon:
- page: Linux
  url: /categories/Linux
  icon:
- page: 杂谈
  url: /categories/杂谈
  icon:
- page: 时间轴
  url: /archives/
  icon:
- page: 关于
  url: /about/
  icon:

生成 about 页面

hexo new page about
编写 about 目录下的 index.md

---
title: 关于博主
date: 2019-04-13 23:11:43
---

## 关于本页面
* 本页面是采用MARKDOWN 和 HTML混合编写
* 主题基于 snippet
* 一个对博主的简介

## 关于博主
* 人生苦短, 我用 Python！
* 简单高效, 必须C语言
* 优雅通用, 我选Qt
* 博主 Github 地址：https://github.com/spygg
* 联系邮箱：liushidc@163.com
* 我的知乎: https://www.zhihu.com/people/spygg/activities

## 关于打赏
* 本小节是使用HTML编写
* 如果你感觉有用的话,大胆的赏赐吧,(*^__^*)
<img style="width: 200px;display: block;margin: 0 auto;" src="/img/weixincode.jpg">
<center style="font-size: 20px; margin-bottom: 2em;">微信赞助</center>
<img style="width: 200px;display: block;margin: 0 auto;" src="/img/zhifubaocode.jpg">
<center style="font-size: 20px; margin-bottom: 2em;">支付宝打赏</center>

## 谢谢

同时修改 themes/hexo-theme-snippet/layout/_partial/header.ejs 下的头像链接为关于页面

1	<a class="header-avatar" href="/about" title='<%= config.author %>'>

添加 google 索引

注册 google 账号
打开google 的控制台选择第二个如下图所示

在设置页面中会提供验证方法
- html 页面验证(这一步 google 会给一个 html 文件,放到工程的source目录下,这样在 hexo g 的时候会自动复制到站点根目录)
- html 字段验证(打/themes/hexo-theme-snippet/layout/_partial/head.ejs 文件)在头部添加

1	<meta name="google-site-verification" content="google提供的字段在控制台里面会有" />

生成站点地图

1	cnpm install hexo-generator-sitemap --save

在控制台左侧的站点地图中输入站点地图的名称(一般为 sitemap.xml)
在source目录下新建 robots.txt 文件内容如下(即允许所有)

1 2	User-agent: * Allow: /

添加必应索引

登录必应控制台
添加网站
添加验证方法和 google 类似

必应站内搜索

这一步是基于上一步的操作,在 node_modules/hexo/lib/plugins/helper/search_form.js 文件中
- 增加 target=”_blank”
- 修改 google.com 为 bing.com
- 修改 sitesearch 为 q1
- 在 value 值前添加 site:

修改后的文件为

'use strict';

function searchFormHelper(options = {}) {
  const config = this.config;
  const className = options.class || 'search-form';
  const text = options.hasOwnProperty('text') ? options.text : 'Search';
  const button = options.button;

  return `<form action="//bing.com/search" target="_blank" method="get" accept-charset="UTF-8" class="${className}"><input type="search" name="q" class="${className}-input"${text ? ` placeholder="${text}"` : ''}>${button ? `<button type="submit" class="${className}-submit">${typeof button === 'string' ? button : text}</button>` : ''}<input type="hidden" name="q1" value="${config.url}"></form>`;
}

module.exports = searchFormHelper;

修改 themes/hexo-theme-snippet/layout/_widget/search.ejs 文件
将”谷歌搜索”改为”必应搜索”和”Bing Search”

1	<%- search_form({'button':'必应搜索','text':'Bing Search'}) %>

修改_config.yml 中的

1	searchGoogle: true

gitalk 评论系统

网上一大堆好多是过时(或者与本主题不一致)信息,找了半天都一直不行,授人以鱼不如授人以渔,下面本大神就一步步演示如何搞定的参考网址 gitalk

创建一个新的 OAuth App
登录网站新建一个如下图
点击上图中的左边的Develop Settings新建一个应用如下图所示
填写配置信息从下图所示的页面中找到最重要的两个 ID
配置_config.yml

## Gitalk评论
gitalk:
   enable: true
   clientID: 6c31603d4df9afc8351b
   clientSecret: c9e81f3ac1492550170fccb28c0f8bb16e3b7ed1
   repo: blogcomment
   owner: spygg
   admin: spygg
   id: window.location.pathname
   # perPage:

找到 themes/hexo-theme-snippet/layout/_vendor/comments/gitalk.ejs 修改成以下内容,同时解决 Validation Failed 的错误参见链接

<link rel="stylesheet" href="https://cdn.bootcss.com/gitalk/1.5.0/gitalk.min.css">
<script src="https://cdn.bootcss.com/gitalk/1.5.0/gitalk.min.js"></script>
<script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.js"></script>

<div id="gitalk-container"></div>
<script type="text/javascript">
    var gitalk = new Gitalk({
        // Gitalk配置
        clientID: "<%= theme.gitalk.clientID%>",
        clientSecret: "<%= theme.gitalk.clientSecret%>",
        repo: "<%= theme.gitalk.repo%>",
        owner: "<%= theme.gitalk.owner%>",
        admin: ["<%= theme.gitalk.admin%>"],
        id: md5(<%= theme.gitalk.id%>),
        distractionFreeMode: true
    });
    gitalk.render('gitalk-container');
</script>

生成,发布页面(不要本地预览),登录你的博客网址,然后在进行你的 github 授权就行了
**排查错误**
一直遇到找不到 issue 的情况,上网各种看教程也不行,下面介绍下解决问题的方法

用 chrome 打开你的博客页面,用 F12 进入 network 模式
发现最后一个页面为https://api.github.com/repos/spygg/blogcomment/issues?client_id=6c31603d4df9afc8351b&client_secret=c9e81f3ac1492550170fccb28c0f8bb16e3b7ed1&labels=Gitalk,Gitalk&t=1555766674635打开后发现数据果然为空
找到 gitalk 的demo 页面看他的网址第二个参数为 Gitalk,Demo
将我的网址 Gitalk,Gitalk 改为 Gitalk 在进入发现竟然有数据返回
怀疑是 id 配置不对,用 chrome 源码方式发现果然 ID 有问题于是修改成上面第 5 步中的内容,打完收招…

添加图片放大

在 themes/hexo-theme-snippet/layout/_partial/head.ejs 添加入下内容

<script type="text/javascript">
    function hasClass(obj, cls) {
        return obj.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));
    }

    function addClass(obj, cls) {
        if (!this.hasClass(obj, cls)) obj.className += " " + cls;
    }

    function removeClass(obj, cls) {
        if (hasClass(obj, cls)) {
            var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');
            obj.className = obj.className.replace(reg, ' ');
        }
    }


    window.addEventListener('load', function () {
        var imgs = document.getElementsByClassName('post-body')[0].getElementsByTagName('img')
        for(var i=0;i<imgs.length;i++){
            //如果设置非全屏标志则跳过
            if(hasClass(imgs[i],'class_no_full_screen')){
                continue;
            }
            // imgs[i].setAttribute('data-background', 'rgba(10, 10, 10, .6)');
            // imgs[i].setAttribute('data-lightense-padding', "0");
            imgs[i].setAttribute('style', "cursor: zoom-in");
            imgs[i].onclick=function(){

                var section=document.getElementsByTagName("section")[0];

                var imgView = document.getElementById('imgViewDom');
                if(imgView == undefined){
                    imgView=document.createElement("div");
                    imgView.id = "imgViewDom";

                    section.appendChild(imgView)

                    imgView.onclick = function(){
                        addClass(imgView, "disnone");
                        imgView.innerHTML="";
                    }
                }

                imgView.innerHTML="<img id = 'jackslowfuck' src=" + this.src + " style='cursor: zoom-out; max-width: 100%;'" + ">";
                removeClass(imgView, "disnone");

                var jackslowfuck = document.getElementById('jackslowfuck');
                jackslowfuck.onclick=function(){
                    addClass(imgView, "disnone");
                    imgView.innerHTML="";
                }

            }
        }

    }, false);
</script>

<style type="text/css">
    #imgViewDom {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        z-index: 99999999;
        background: rgba(0, 0, 0,0.7);
        overflow: auto;
        display: -webkit-box;
        -webkit-box-align: center;
        -webkit-box-pack: center;
        display: -moz-box;
        -moz-box-align: center;
        -moz-box-pack: center;
        display: -o-box;
        -o-box-align: center;
        -o-box-pack: center;
        display: -ms-box;
        -ms-box-align: center;
        -ms-box-pack: center;
        display: box;
        box-align: center;
        box-pack: center;
        cursor: zoom-out;
    }

    .disnone{
        display: none !important;
    }
</style>

视频大小调整

修改 hexo-theme-snippet/source/css/style.css

video{
    width: 100%;
    max-width: 100%;
}

去掉首页懒加载图

在 hexo-theme-snippet/layout/index.ejs 文件中找到_photoUrl 修改为 false 如下所示

1
2
3

var _photoUrl = post.img || (urls.length > 0 && urls[random]) || (urls2.length > 0 && urls2[random2]) || '';

_photoUrl = false

自动创建 gitalk issue

没自己动手….

我的配置

# ---------------------------------------------------------------
#   Site Information And Theme Configuration Settings
#   language: zh-CN
# ---------------------------------------------------------------

## menu
menu:
- page: home
  url: /
  icon: fa-home
- page: Qt
  url: /categories/Qt
  icon:
- page: Python
  url: /categories/Python
  icon:
- page: Linux
  url: /categories/Linux
  icon:
- page: 杂谈
  url: /categories/杂谈
  icon:
- page: 时间轴
  url: /archives/
  icon:
- page: 关于
  url: /about/
  icon:

## favicon
favicon: /favicon.ico

## Feed
rss: /atom.xml

## Carousel
carousel:
  img: './img/head-img.jpg'
  url: 'javascript:'

# 各个小工具的设置

## widgets
widgets:
  - search
  # - notification
  - social
  - category
  - archive
  - tagcloud
  - friends


## 搜索
jsonContent:
  searchLocal: false
  searchGoogle: true
  posts:
    title: true
    text: true
    content: true
    categories: false
    tags: false

## 网站公告设置
notification: |-
            <p>
                主题下载：<a href="https://github.com/shenliyang/hexo-theme-snippet" title="fork me" target="_blank">Snippet主题</a> <br/>
                主题使用：<a href="https://github.com/shenliyang/hexo-theme-snippet/blob/master/README.md#常见问题" title="" target="_blank">常见使用问题</a> <br/>
                支持主题：<a href="https://github.com/shenliyang/hexo-theme-snippet/stargazers">Star一下</a>
            </p>

## 社交设置
social:
 - name: Github
   icon: git
   href: //github.com/spygg
 - name: 邮箱
   icon: envelope-o
   href: mailto:liushidc@163.com
 - name: RSS
   icon: feed
   href: /atom.xml

## 文章分类设置
cate_config:
   show_count: true
   show_current: true

## 文章归档设置
arch_config:
   type: 'monthly'
   format: 'YYYY年MM月'
   show_count: true
   order: -1

## 标签云设置
tagcloud:
  tag3d: true
  textColour: '#444'
  outlineMethod: 'block'
  outlineColour: '#FFDAB9'
  interval: 30
  freezeActive: true
  frontSelect: true
  reverse: true
  wheelZoom: false

## 友链设置
links:
  - Hexo官网: https://hexo.io/zh-cn/
  - snippet主题博主: https://www.91h5.cc/

# 主题自定义个性化配置

## 网站宣传语
branding: 技术引领生活!

## 设置banner背景图片
banner:
    img: http://snippet.shenliyang.com/img/banner.jpg

## 首页列表底部面板
homePanel: true

## 缩略图自定义随机图片
defaultImgs:
  -

## 截取文章首页描述字数
excerptLength: 120

## 是否开启文章目录
toc: true

## 代码高亮配置
highlightTheme:

## bootstrap配置
bootstrap:

## ICON配置
fontAwesome:

## 文章过期提醒功能
warning:
  days: 300
  text: '本文于%d天之前发表，文中内容可能已经过时。'

## 文章内声明
declaration:
  enable: true
  title: '转载声明'
  tip: |-
      商业转载请联系作者获得授权,非商业转载请注明出处 © <a href="" target="_blank">spygg</a>

## 文章打赏
reward:
  alipay: '/img/zhifubaocode.jpg'
  wepay: '/img/weixincode.jpg'
  tip: 您的支持是我前行的动力!

## 主题评论

## Valine评论
valine:
   enable: true
   appId:
   appKey:
   placeholder: 说点什么吧
   notify: false
   verify: false
   avatar: mm
   meta: nick,mail
   pageSize: 10

### 畅言评论(需要ICP备案)
changyan:
  enable: false
  appid:
  conf:

### 来必力
livere:
  enable: false
  livere_uid:

## Gitalk评论
gitalk:
   enable: false
   clientID:
   clientSecret:
   repo:
   owner:
   admin:
   perPage:
   id:

### Disqus评论
disqus:
  enable: false
  shortname: snippet
  count: false

### gitment评论(长期不更新，不建议使用)
gitment:
  enable: false
  owner:
  repo:
  client_id:
  client_secret:
  perPage: 10

### 友言评论(服务不稳定)
uyan:
  enable: false
  uyan_id:


## 网站访客统计
visit_counter:
   site: false
   page: false

## 网站访问统计分析

### 网盟CNZZ统计
cnzz_analytics:

### 百度统计
baidu_analytics:

### 谷歌统计
google_analytics:

### 腾讯分析
tencent_analytics:

### 百度站点认证
baidu_site_verification:

### 百度自动推送
baidu_push: true

#网站主题配置
since: 2019
robot: 'all' ### 控制搜索引擎的抓取和索引编制行为，默认为all
version: 1.2.1