hexo个人主页搭建

# for Ubuntu16.04
$ sudo apt install npm nodejs-legacy
$ sudo npm install hexo-cli -g
$ hexo init blog
$ cd blog
$ npm install
$ hexo server

.
├── node_modules  # nodejs的目录
├── public        # 输出网站目录
├── scaffolds     # hexo 的一些预设模版
├── source        # 独立submodule
├── themes        # 主题 里面也有主题的配置文件不要与项目的配置文件搞混
├── README.md
├── _config.yml   # 整个项目配置文件
├── db.json
├── index.html。  # 用于跳转到public下
└── package.json

5 directories, 5 files

# 对于我来说
$ cd path/to/your/github.io/project
$ git submodule add https://github.com/talengu/blog_source source

# clone 项目
$ git clone https://github.com/talengu/talengu.github.io
$ git submodule init
$ git submodule update

# 切换到最新的submodule
$ cd source
$ git merge origin/master
$ git submodule update

# 执行npm按照，由于已经生成它会按照package.json文件自动安装
# 没有npm的话 安装 https://nodejs.org/en/download/
$ npm install

# MathJax Support
mathjax:
  enable: true
  cdn: //cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML

/*页面载入完成后，创建复制按钮*/
!function (e, t, a) { 
  /* code */
  var initCopyCode = function(){
    var copyHtml = '';
    copyHtml += '<button class="btn-copy" data-clipboard-snippet="">';
    copyHtml += '  <i class="fa fa-globe"></i><span>copy</span>';
    copyHtml += '</button>';
    $(".highlight .code pre").before(copyHtml);
    new ClipboardJS('.btn-copy', {
        target: function(trigger) {
            return trigger.nextElementSibling;
        }
    });
  }
  initCopyCode();
}(window, document);

//代码块复制按钮
.highlight{
  //方便copy代码按钮（btn-copy）的定位
  position: relative;
}
.btn-copy {
    display: inline-block;
    cursor: pointer;
    background-color: #eee;
    background-image: linear-gradient(#fcfcfc,#eee);
    border: 1px solid #d5d5d5;
    border-radius: 3px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-appearance: none;
    font-size: 13px;
    font-weight: 700;
    line-height: 20px;
    color: #333;
    -webkit-transition: opacity .3s ease-in-out;
    -o-transition: opacity .3s ease-in-out;
    transition: opacity .3s ease-in-out;
    padding: 2px 6px;
    position: absolute;
    right: 5px;
    top: 5px;
    opacity: 0;
}
.btn-copy span {
    margin-left: 5px;
}
.highlight:hover .btn-copy{
  opacity: 1;
}

  <!-- 代码块复制功能 -->
  <script type="text/javascript" src="/js/src/clipboard.min.js"></script>  
  <script type="text/javascript" src="/js/src/clipboard-use.js"></script>

# 安装gitment
$ npm install gitment --save

# Gitment
# Introduction: https://imsun.net/posts/gitment-introduction/
gitment:
  enable: true
  githubID: yourid
  repo: yourrepo
  ClientID: yourid
  ClientSecret: yoursecret
  lazy: true

gitmentbutton: Show comments from Gitment

{% elseif theme.valine.appid and theme.valine.appkey %}
      <div id="vcomments"></div>

    {% elseif theme.gitment.enable %}
       {% if theme.gitment.lazy %}
         <div onclick="ShowGitment()" id="gitment-display-button">{{  __('gitmentbutton') }}</div>
         <div id="gitment-container" style="display:none"></div>
       {% else %}
         <div id="gitment-container"></div>
       {% endif %}

  {% endif %}
  </div>
{% endif %}

{% if theme.gitment.enable %}
   {% set owner = theme.gitment.githubID %}
   {% set repo = theme.gitment.repo %}
   {% set cid = theme.gitment.ClientID %}
   {% set cs = theme.gitment.ClientSecret %}
   <link rel="stylesheet" href="https://imsun.github.io/gitment/style/default.css">
   <script src="https://imsun.github.io/gitment/dist/gitment.browser.js"></script>
   {% if not theme.gitment.lazy %}
       <script type="text/javascript">
           var gitment = new Gitment({
               id: window.location.pathname, 
               owner: '{{owner}}',
               repo: '{{repo}}',
               oauth: {
                   client_id: '{{cid}}',
                   client_secret: '{{cs}}',
               }});
           gitment.render('gitment-container');
       </script>
   {% else %}
       <script type="text/javascript">
           function ShowGitment(){
               document.getElementById("gitment-display-button").style.display = "none";
               document.getElementById("gitment-container").style.display = "block";
               var gitment = new Gitment({
                   id: document.location.href, 
                   owner: '{{owner}}',
                   repo: '{{repo}}',
                   oauth: {
                       client_id: '{{cid}}',
                       client_secret: '{{cs}}',
                   }});
               gitment.render('gitment-container');
           }
       </script>
   {% endif %}
{% endif %}

{% include 'gitment.swig' %}

#gitment-display-button{
     display: inline-block;
     padding: 0 15px;
     color: #0a9caf;
     cursor: pointer;
     font-size: 14px;
     border: 1px solid #0a9caf;
     border-radius: 4px;
 }
 #gitment-display-button:hover{
     color: #fff;
     background: #0a9caf;
 }

@import "gitment";

npm install --global gulp
npm install gulp-minify-css gulp-uglify gulp-htmlmin gulp-htmlclean  gulp-imagemin --save

// 设置 淘宝镜像源
npm config set registry https://registry.npm.taobao.org

// 查看 使用的 镜像源
npm config get registry

// 安装 淘宝镜像源
npm install -g cnpm --registry=https://registry.npm.taobao.org

---
title: 个人主页搭建
date: 2016-12-22 12:39:04
categories:
  - 博客搭建
tags:
  - Hexo
comments: true
copyright: true
---

{% if theme.post_copyright.enable %}
{% if page.copyright %} <!-- 加上page md文件头部使能-->
  <ul class="post-copyright">
    <li class="post-copyright-author">
      <strong>{{ __('post.copyright.author') + __('symbol.colon') }}</strong>
      {{ config.author }}
    </li>
    <li class="post-copyright-link">
      <strong>{{ __('post.copyright.link') + __('symbol.colon') }}</strong>
      <!-- url的修正，可能要根据你的情况修改-->
      <a href="{{ config.url }}{{ config.root }}{{ post.path }}" title="{{ post.title }}">{{ config.url }}{{ config.root }}{{ post.path }}</a>
    </li>
    <li class="post-copyright-license">
      <strong>{{ __('post.copyright.license_title') + __('symbol.colon') }} </strong>
      {{ __('post.copyright.license_content', theme.post_copyright.license_url, theme.post_copyright.license) }}
    </li>
  </ul>
{% endif %}
{% endif %}

# 安装hexo-generator-feed
npm install hexo-generator-feed --save
# 在_config.yml 启用feed

url += 'public/'

npm un hexo-renderer-marked --save
npm i hexo-renderer-markdown-it --save

## Docs: https://github.com/celsomiranda/hexo-renderer-markdown-it/wiki
markdown:
  # 渲染设置
  render:
    # 置为true时，html内容保持不变；置为false时，html内容将被转义成普通字符串
    html: true
    # 是否生成与XHTML完全兼容的标签（虽然我不懂是什么意思）
    xhtmlOut: false
    # 置为true时，每个换行符都被渲染成一个<br>（即Hexo的默认表现）；置为false时，只有空行才会被渲染为<br>（GFM的默认表现）
    breaks: true
    # 是否自动识别链接并把它渲染成链接
    linkify: true
    # 是否自动识别印刷格式（意思是把(c)渲染为©这样的）
    typographer: true
    # 如果typographer被设置为true，则该选项用于设置将dumb quotes（""）自动替换为smart quotes
    quotes: '“”‘’'
  # 设置所需插件
  plugins:
    - markdown-it-abbr
    - markdown-it-footnote
    - markdown-it-ins
    - markdown-it-sub
    - markdown-it-sup
  # 锚点设置（因为我没有尝试相关内容，所以就不翻译相关说明了）
  anchors:
    level: 2
    collisionSuffix: 'v'
    permalink: true
    permalinkClass: header-anchor
    permalinkSymbol: ¶

# ref https://www.dazhuanlan.com/2019/11/22/5dd6faa42d279/
## Docs: https://github.com/celsomiranda/hexo-renderer-markdown-it/wiki
markdown:
  # 渲染设置
  render:
    # 置为true时，html内容保持不变；置为false时，html内容将被转义成普通字符串
    html: true
    # 是否生成与XHTML完全兼容的标签（虽然我不懂是什么意思）
    xhtmlOut: false
    # 置为true时，每个换行符都被渲染成一个<br>（即Hexo的默认表现）；置为false时，只有空行才会被渲染为<br>（GFM的默认表现）
    breaks: true
    # 是否自动识别链接并把它渲染成链接
    linkify: true
    # 是否自动识别印刷格式（意思是把(c)渲染为©这样的）
    typographer: true
    # 如果typographer被设置为true，则该选项用于设置将dumb quotes（""）自动替换为smart quotes
    quotes: '“”‘’'
  # 设置所需插件
  plugins:
    - markdown-it-abbr
    - markdown-it-footnote
    - markdown-it-ins
    - markdown-it-sub
    - markdown-it-sup
  # 锚点设置（因为我没有尝试相关内容，所以就不翻译相关说明了）
  # anchors:
  #   level: 2
  #   collisionSuffix: 'v'
  #   permalink: true
  #   permalinkClass: header-anchor
  #   permalinkSymbol: ¶
  anchors:
    # Minimum level for ID creation. (Ex. h2 to h6)
    level: 2
    # A suffix that is prepended to the number given if the ID is repeated.
    collisionSuffix: ''           
    # If `true`, creates an anchor tag with a permalink besides the heading.
    permalink: true              
    # Class used for the permalink anchor tag.
    permalinkClass: header-anchor
    # Set to 'right' to add permalink after heading
    permalinkSide: 'left'
    # The symbol used to make the permalink
    permalinkSymbol: ¶
    # Transform anchor to (1) lower case; (2) upper case
    case: 0
    # Replace space with a character
    separator: '-'

<script type="text/javascript" id="clustrmaps" src="//clustrmaps.com/map_v2.js?d=5Y5S382WVdS5Rafm-8SR-tSr5c6erGKcUlEEEb5LZBc"></script>

<aside >
    {% if theme.sidebar.onmobile %}
      <div ></div>
    {% endif %}
    <div class="sidebar-inner">

      {% set display_toc = is_post and theme.toc.enable or is_page and theme.toc.enable %}

<!-- Insert clustrmaps.com -->
<script type='text/javascript' id='clustrmaps' src='//cdn.clustrmaps.com/map_v2.js?

cl=ffffff&w=a&t=n&d=4sW93oXXX0e8'></script>

      {% if display_toc and toc(page.content).length > 1 %}