博客迁移及jacman主题配置

文章目录

1. 博客迁移
2. jacman配置
1. 2.1. 安装hexo-asset-image的插件来处理图片
2. 2.2. 添加总pv计数和总uv计数
3. 2.3. 添加文章访问计数
4. 2.4. 404页面
5. 2.5. 打赏功能
6. 2.6. 评论

博客迁移及jacman主题配置的一些技巧

博客迁移

针对从一个电脑迁移到另外一个情况

下载git，Node.js安装，嫌弃麻烦配置公钥登录，打开git bash，输入：

1	ssh-keygen -t rsa -C "youremail@example.com"

邮箱换成自己github的

登陆GitHub，打开「Settings」->「SSH and GPG keys」，然后点击「new SSH key」，填上任意Title，在Key文本框里粘贴公钥id_rsa.pub文件的内容，也就是以公钥来登录
打开git bash，输入 npm install hexo-cli -g，安装hexo
解释一下：

node_modules：是依赖包
public：存放的是生成的页面
scaffolds：命令生成文章等的模板
source：用命令创建的各种文章
themes：主题
_config.yml：整个博客的配置
db.json：source解析所得到的
package.json：项目所需模块项目的配置信息，说明使用哪些包
.gitignore ： 限定在提交的时候哪些文件可以忽略
.git ：

其中，必须拷贝的文件有_config.yml，theme/，source/，scaffolds/，package.json，.gitignore
，.git/，node_modules/，public/，.deploy_git/，db.json文件需要删除

在git bash中切换目录到新拷贝的文件夹里，使用 npm install 命令，进行模块安装。不要用hexo init整体初始化。
安装npm install hexo-deployer-git –save使用hexo d
安装npm install hexo-generator-feed –save建立RSS订阅
建立站点地图

1 2	npm install hexo-generator-sitemap --save npm install hexo-generator-baidu-sitemap --save

jacman配置

安装hexo-asset-image的插件来处理图片

1	npm install https://github.com/CodeFalling/hexo-asset-image --save

确认_config.yml 中有 post_asset_folder:true，设置post_asset_folder为true参数后，在建立文件时，Hexo
会自动建立一个与文章同名的文件夹，您可以把与该文章相关的所有资源都放到那个文件夹，如此一来，您便可以更方便的使用资源。结构如下：

本地图片测试
├── apppicker.jpg
├── logo.jpg
└── rules.jpg

本地图片测试.md
这样的目录结构（目录名和文章名一致），只要使用

1	![](本地图片测试/logo.jpg)

就可以插入图片。其中[]里面不写文字则没有图片标题。

添加总pv计数和总uv计数

在themes/你的主题/layout/_partial/footer.ejs中最后面添加脚本：

1 2	<script async src="https://dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js"> </script>

在上面footer.ejs文件最后添加这两个计数脚本：

<span id="busuanzi_container_site_pv">
      Total visits: <span id="busuanzi_value_site_pv"></span>
</span>
<span id="busuanzi_container_site_uv">
      You are Visiter No.<span id="busuanzi_value_site_uv"></span>
</span>

添加文章访问计数

这里我添加到标题右下方，正文上面的地方。在themes/jacman/layout/_partial/post/header.ejs中
class=”article-time”> 标签里面添加：

1
2
3

<span id="busuanzi_container_page_pv">
    总阅读<span id="busuanzi_value_page_pv"></span>次
</span>

404页面

直接在根目录下创建自己的404.html或者404.md就可以
推荐使用腾讯公益

<script type="text/javascript" 
   src="//qzonestyle.gtimg.cn/qzone/hybrid/app/404/search_children.js"
   charset="utf-8" 
   homePageUrl="http://yoursite.com/yourPage.html" 
   homePageName="回到我的主页">
</script>

打赏功能

在themes\jacman_config.yml文件中添加如下语句：

donate:
  enable: true
  text: 打赏我的人，运气都不会太差~
  wechat: http://ac-fmwkcchq.clouddn.com/079ce0e3beced7de32fa.jpeg
  alipay: http://ac-fmwkcchq.clouddn.com/ccfe5d160b2b94b6e4c0.jpeg
  web: true

我们想要将打赏功能嵌入到每一篇博客当中，所以我们需要改动文章显示的HTML模板。
找到themes\jacman\layout_partial\post\article.ejs
这就是文章的HTML模板文件，在

…

的下面，<%- partial(‘footer’) %>的上面插入如下HTML代码：

<% 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>
        <% if(theme.donate.web) { %>
        <div width="100%" align="center"><div name="dashmain" id="dash-main-id-87895f" class="dash-main-3 87895f-0.99"></div></div>
        <script type="text/javascript" charset="utf-8" src="http://www.dashangcloud.com/static/ds.js"></script>
        <% } %>

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

        <a href="<%= theme.donate.alipay %>" title="用支付宝扫一扫即可~" class="fancybox" rel="article0">
            <img src="<%= theme.donate.alipay %>" title="支付宝打赏 Donate" 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>
<!-- /Donate Module -->
   <% } %>

多说，网易云跟帖等挂掉，留给我为数不多的选择有gitment、来必力、disqus。

disqus评论需要翻墙，在theme目录下的_config.yml填写disqus_shortname，就是disqus 的用户名，登录disqus，注册，get started –> I want to install Disqus on my site –> Website Name就是disqus_shortname。
来必力很好用，韩国的，国内可用，支持图片，可以数据统计，邮件通知应有尽有，登录livere，注册，头像 –> 管理页面 –> 生成JS代码：

<!-- 来必力City版安装代码 -->
<div id="lv-container" data-id="city" data-uid="xxxxxxx">
<script type="text/javascript">
   (function(d, s) {
       var j, e = d.getElementsByTagName(s)[0];

       if (typeof LivereTower === 'function') { return; }

       j = d.createElement(s);
       j.src = 'https://cdn-city.livere.com/js/embed.dist.js';
       j.async = true;

       e.parentNode.insertBefore(j, e);
   })(document, 'script');
</script>
<noscript>为正常使用来必力评论功能请激活JavaScript</noscript>
</div>
<!-- City版安装代码已完成 -->

在themes\jacman\layout_partial\post\article.ejs中 <%- partial(‘pagination’) %> 和 <%- partial(‘comment’) %> 中间暴力插入JS代码即可。如果有多个评论插件，可以在themes\jacman\layout_partial\post\comment.ejs中类似的加入判断条件。

Gitment
还没试，参考这个，将来如果来必力挂掉再说吧。

参考链接：

http://wuchong.me/blog/2014/11/20/how-to-use-jacman/

MSAREHERE

Just have a little faith