yi_Xu
菜单
置顶

Hello World

这本是Hexo搭建博客时自动生成的页面，我将其搬运到我的Wiki中，并在此处填写我的填坑之旅。

基于Hexo+Github搭建博客

基于Hexo+Github搭建博客，你可以从参考的相关文章在Baidu或Google上一找一大堆，我就不在此处赘述了。

我的参考链接如下：

我仅在此留下我在搭建博客中遇到的一些问题，并给出相关解决方案。

题材选择

  • 博主仅使用Hexo搭建了个人博客，不了解其他的搭建过程，请恕我不能帮忙解答其他相关搭建方法的问题。
  • 博主仅使用Simiki搭建了个人 Wiki，其他同上。
  • 博主仅使用Yelee作为个人博客的主题，其他同上。
  • 博主仅使用Sample2的作为个人 Wiki 的主题，其他同上。

Github Pages 的准备

  • 温馨提示：username请务必认真选择，毕竟改掉会影响很多的内容。
  • Github网站页面为全英文的，如非强烈必要，请勿用全网页翻译，影响理解和使用，个别单词不认识，查一查正好可以扩充一下词汇量嘛。

环境准备

域名相关

  • 域名购买建议慎重，毕竟花钱。考虑好，做过的事不后悔就行。对了，如要购买，可以网上找找优惠码，你要买的域名在任何域名发售商那都是可以购买的，买完之后，别人就不能购买你的域名了，当然别忘了续费。
  • 你可以解析不同的页面地址到你的域名下，我同时部署在Github Pages和Coding Pages上，但显示内容只有Coding Pages的内容，但我还是一直部署两个在，感觉以后弄懂再说。

主题选择

  • 主题选择看自己喜欢，主题配置找该主题的教程就行，大部分都非常详细。实在不行，去Github上提 issue，作者或其他热心人会很乐意回答你的。这是我的主题 Yelee 配置教程。

个人对主题的小修改如下：

  • 下方的Copy改成Copyright。以下为解决方案： 在themes\yelee\layout\_partial\footer.ejs中找到以下内容：

    1
2
3
4

    <div class="footer-left">
  <i class="fa fa-copyright"></i>
    <% if (theme.since && !isNaN(theme.since) && theme.since < date(new Date(), 'YYYY')) { %><%- theme.since%>-<% } %><%= date(new Date(), 'YYYY') %<%= config.author || config.title %>
</div>

    将内容修改为：

    1
2
3
4
5

    <div class="footer-left">
    Copyright
    <i class="fa fa-copyright"></i>
    <% if (theme.since && !isNaN(theme.since) && theme.since < date(new Date(), 'YYYY')) { %><%- theme.since%>-<% } %><%= date(new Date(), 'YYYY') %> <%= config.author || config.title %>
</div>

  • 添加打赏功能，教程参考：为 Hexo 博客添加版权说明和打赏功能，当然我只是选取其中部分进行匹配我的需要。以下为解决方案： 在themes\yelee\_config.yml中添加以下内容：

    1
2
3
4
5
6
7
8

    #打赏
donate:
  on: true
  text: 如果觉得我的文章有值得赞赏的地方，可以给予支持！
  wechat:
  #此处填上你的微信支付图片地址。
  alipay:
  #此处填上你的支付宝支付图片地址。

    在themes\yelee\layout\_partial\article.ejs找到以下内容：

    1
2
3

    <% if (!index && theme.share.on && (post.share != false || post.share)){ %>
  <%- partial('post/share') %>
<% } %>

    在这个的上面加上以下内容：

      1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105

    <% if (!index && theme.donate.on && (post.donate != false || post.donate)){ %>
  <% if (theme.donate) { %>
      <!-- css -->
      <style type="text/css">
          .center {
              text-align: center;
          }
          .hidden {
              display: none;
          }
        .donate_bar a.btn_donate{
          display: inline-block;
          width: 82px;
          height: 82px;
          background: url("http://7xsl28.com1.z0.glb.clouddn.com/btn_reward.gif") no-repeat;
          _background: url("http://7xsl28.com1.z0.glb.clouddn.com/btn_reward.gif") no-repeat;

          <!-- http://img.t.sinajs.cn/t5/style/images/apps_PRF/e_media/btn_reward.gif
              因为本 hexo 生成的博客所用的 theme 的 a:hover 带动画效果，
            为了在让打赏按钮显示效果正常 而 添加了以下几行 css，
            嵌入其它博客时不一定要它们。 -->
          -webkit-transition: background 0s;
          -moz-transition: background 0s;
          -o-transition: background 0s;
          -ms-transition: background 0s;
          transition: background 0s;
          <!-- /让打赏按钮的效果显示正常 而 添加的几行 css 到此结束 -->
        }

        .donate_bar a.btn_donate:hover{ background-position: 0px -82px;}
        .donate_bar .donate_txt {
          display: block;
          color: #9d9d9d;
          font: 14px/2 "Microsoft Yahei";
        }
        .bold{ font-weight: bold; }
      </style>
      <!-- /css -->

        <!-- Donate Module -->
    <div id="donate_module">

      <!-- btn_donate & tips -->
      <div id="donate_board" class="donate_bar center">
          <br>
          ------------------------------------------------------------------------------------------------------------------------------
          <br>
        <a id="btn_donate" class="btn_donate" target="_self" href="javascript:;" title="Donate 打赏"></a>
        <span class="donate_txt">
          <%= theme.donate.text %>
        </span>


      </div>
      <!-- /btn_donate & tips -->

      <!-- donate guide -->

      <div id="donate_guide" class="donate_bar center hidden">
            <br>
          ------------------------------------------------------------------------------------------------------------------------------
          <br>

        <a href="<%= theme.donate.wechat %>" title="用微信扫一扫哦~" class="fancybox" rel="article0">
          <img src="<%= theme.donate.wechat %>" title="微信打赏 yi_Xu" height="190px" width="auto"/>
        </a>

            &nbsp;&nbsp;

        <a href="<%= theme.donate.alipay %>" title="用支付宝扫一扫即可~" class="fancybox" rel="article0">
          <img src="<%= theme.donate.alipay %>" title="支付宝打赏 yi_Xu" height="190px" width="auto"/>
        </a>

        <span class="donate_txt">
          <%= theme.donate.text %>
        </span>

      </div>
      <!-- /donate guide -->

      <!-- donate script -->
      <script type="text/javascript">
        document.getElementById('btn_donate').onclick = function() {
          $('#donate_board').addClass('hidden');
          $('#donate_guide').removeClass('hidden');
        }

        function donate_on_web(){
          $('#donate').submit();
            }

        var original_window_onload = window.onload;
            window.onload = function () {
                if (original_window_onload) {
                    original_window_onload();
                }
                document.getElementById('donate_board_wdg').className = 'hidden';
        }
      </script>
      <!-- /donate script -->
    </div>

<% }%>
<% }%>

    效果显示见文章下方。

  • 保持图片居中，主题默认不居中，我参考了主题中的issue#87。以下为解决方案: 在\themes\yelee\source\css\_partial\article.styl的末尾添加：

    1
2
3

    .article img {
  display: block;
}