Hello World —— 博客搭建历程

Contents
  1. 1. 搭建博客
  2. 2. 主题选择
  3. 3. 问题处理

Updating

搭建博客

使用hexo生成静态博客并架设在免费的github pages平台
详情看这篇博客,零基础免费搭建个人博客-hexo+github

主题选择

搞了半天,研究了jacman,next,...,最后发现还是自带的landscape挺好的,然后就用了landscape-plus
准备在此基础上改改,借鉴了这个人的修改姿势,并自己添加了一些东西

  • 修改归档挂件的时间格式:(左边为原图,右边为效果图)

    • 路径: \themes\landscape-plus\layout\_widget\archive.ejs5
      1
      <%- list_archives({format: 'YYYY年 MM月'}) %>

  • 修改归档页面的时间格式:(左边为原图,右边为效果图)

    • 路径:\themes\landscape-plus\layout\_partial\archive-post.ejs4
      1
      <%- partial('post/date', {class_name: 'archive-article-date', date_format: 'MM-DD'}) %>

  • 添加新挂件,推荐文章:

    • 路径:\themes\landscape-plus\layout\_widget\archive\recent_comments.ejs 新文件
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      <% if (site.posts.length){ %>
      <div class="widget-wrap">
      <h3 class="widget-title"><%= __('recent_comments') %></h3>
      <div class="widget">
      <!-- 多说最新评论 start -->
      <div class="ds-recent-comments" data-num-items="5" data-show-avatars="0" data-show-time="1" data-show-title="1" data-show-admin="1" data-excerpt-length="70"></div>
      <!-- 多说最新评论 end -->
      <!-- 多说公共JS代码 start (一个网页只需插入一次) -->
      <script type="text/javascript">
      var duoshuoQuery = {short_name:"Taos"};
      (function() {
      var ds = document.createElement('script');
      ds.type = 'text/javascript';ds.async = true;
      ds.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + '//static.duoshuo.com/embed.js';
      ds.charset = 'UTF-8';
      (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(ds);
      })();
      </script>
      <!-- 多说公共JS代码 end -->
      </div>
      </div>
      <% } %>

  • 添加新挂件,最近评论:

    • 路径:\themes\landscape-plus\layout\_widget\archive\recent_comments.ejs 新文件

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      <% if (site.posts.length){ %>
      <div class="widget-wrap">
      <h3 class="widget-title"><%= __('recent_comments') %></h3>
      <div class="widget">
      <!-- 多说最新评论 start -->
      <div class="ds-recent-comments" data-num-items="5" data-show-avatars="0" data-show-time="1" data-show-title="1" data-show-admin="1" data-excerpt-length="70"></div>
      <!-- 多说最新评论 end -->
      <!-- 多说公共JS代码 start (一个网页只需插入一次) -->
      <script type="text/javascript">
      var duoshuoQuery = {short_name:"Taos"};
      (function() {
      var ds = document.createElement('script');
      ds.type = 'text/javascript';ds.async = true;
      ds.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + '//static.duoshuo.com/embed.js';
      ds.charset = 'UTF-8';
      (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(ds);
      })();
      </script>
      <!-- 多说公共JS代码 end -->
      </div>
      </div>
      <% } %>
    • 添加最近评论挂件样式表
      路径:\themes\landscape-plus\source\css\_partial\sidebar-aside.styl 末尾添加

      1
      2
      3
      4
      .ds-recent-comments
      margin: -16px 0 0 0
      a
      color: color-link

  • 文章结尾增加声明文字:

    • 路径:\themes\landscape-plus\layout\_partial\post\statement.ejs 新文件

      1
      2
      3
      4
      5
      6
      <% if (!index && page.source != 'about/index.md'){ %>
      <div class="article-statement">
      <hr>
      <!-- 内容 -->
      </div>
      <% } %>
    • 添加声明文字样式表
      路径:\themes\landscape-plus\source\css\_partial\sidebar.styl 末尾添加

      1
      2
      3
      4
      5
      6
      7
      8
      9
      .article-statement
      font-size: 0.85em;
      line-height: 1.6em;
      margin: 0.5em 0;
      text-shadow: 0 1px #fff;
      color: #999;
      a
      &:hover
      text-decoration: none;

  • 页脚中添加访问统计、为超链接添加target=”_blank”属性:

    • 路径:\themes\landscape-plus-bak\layout\_partial\footer.ejs 修改为
      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
      <footer id="footer">
      <script async src="https://dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js"> </script>
      <% if (theme.sidebar === 'bottom'){ %>
      <%- partial('_partial/sidebar') %>
      <% } %>
      <div class="outer">
      <div id="footer-info" class="inner" align = "center">
      Copyright &copy; <%= date(new Date(), 'YYYY') %>
      <a href="/" target="_blank"> <%= config.author || config.title %> </a> <br>
      Powered by <a href="https://hexo.io/zh-cn/docs/index.html" target="_blank">Hexo</a>
      &nbsp;|&nbsp;
      Theme by <a href="https://github.com/xiangming/landscape-plus" target="_blank">landscape-plus</a>
      &nbsp;|&nbsp;
      <span id="busuanzi_container_site_pv">
      总访问量 <a href="http://service.ibruce.info/" target="_blank"><span id="busuanzi_value_site_pv"></span></a> 次
      </span>
      <span id="busuanzi_container_site_uv">
      <a href="http://service.ibruce.info/" target="_blank"><span id="busuanzi_value_site_uv"></span></a> 人
      </span>
      </div>
      </div>
      <!-- 为超链接加上target='_blank'属性 -->
      <script type="text/javascript">
      $(document).ready(function() {
      $('a[href^="http"]').each(function() {
      $(this).attr('target', '_blank');
      });
      });
      </script>
      </footer>

  • 文章添加生成目录开关

    • 路径:\themes\landscape-plus\layout\_partial\article.ejs 搜索<%- post.content %>前面添加

      1
      2
      3
      4
      5
      6
      7
      <!-- Table of Contents -->
      <% if (!index && post.toc){ %>
      <div id="toc" class="toc-article">
      <strong class="toc-title">Contents</strong>
      <%- toc(post.content) %>
      </div>
      <% } %>
    • 添加目录样式表
      路径:\themes\landscape-plus\source\css\_partial\article.styl 末尾添加

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      .toc-article
      background #eee
      border 1px solid #bbb
      border-radius 10px
      margin 1.5em 0 0.3em 1.5em
      padding 1.2em 1em 0 1em
      max-width 28%
      .toc-title
      font-size 120%
      #toc
      line-height 1em
      font-size 0.9em
      float right
      .toc
      padding 0
      margin 1em
      line-height 1.8em
      li
      list-style-type none
      .toc-child
      margin-left 1em
    • 启用目录
      在需要添加文章目录的的博文md文件中添加开关toc: true
      如果不喜欢链接的颜色,可以编辑\themes\landscape-plus\source\css\_variables.styl6

      1
      color-link = #E32D40
  • 文章标题添加一条灰色分割线

    • 路径:\themes\landscape-plus\source\css\_partial\article.styl26
      1
      2
      3
      .article-header
      padding: article-padding
      border-bottom: 2px solid color-border

问题处理

  • Marked渲染markdown与Mathjax渲染latex冲突
    路径:\node_modules\marked\lib\marked.js

    • 451

      1
      2
      3
      escape: /^\\([\\`*{}\[\]()# +\-.!_>])/,
      修改为:
      escape: /^\\([`*\[\]()# +\-.!_>])/,
    • 854

      1
      2
      3
      return '<em>' + text + '</em>';
      修改为:
      return '_' + text + '_';
  • 图床和云空间选择
    极简图床配合七牛云,感觉挺棒的


1. 除非注明,本博文即为原创,转载请注明链接地址
2. 本博文只代表博主当时的观点或结论,请不要恶意攻击
3. 如果本文帮到了您,不妨点一下 下面分享到 按钮,让更多的人看到