tags: [转载,gitlab]
categories: [CICD]

前言

折腾还是折腾，orz, 早晚得改，受不了了每天就是改博客样式，文章没写几篇！没错，我就是在喷我自己！
现在将之前NEXT主题替换为icarus，本来准备使用inside主题的，奈何生态实在不是很好，一想到之后还要修改，还是果断换了

更换主题

主题下载

下载地址：https://github.com/ppoffice/hexo-theme-icarus/releases
也能使用git clone

  1. git clone https://github.com/ppoffice/hexo-theme-icarus.git themes/icarus

建议还是使用下载，快啊，完毕后，放到主题文件夹中

安装依赖

icarus的依赖非常多，需要提前安装好

  1. npm install bulma-stylus
  2. npm install hexo-component-inferno
  3. npm install hexo-renderer-inferno
  4. npm install inferno
  5. npm install inferno-create-element
  6. npm install --save bulma-stylus@0.8.0

发布测试

切换到blog目录下
配置文件添加

  1. # Deployment
  2. deploy:
  3.   type: git
  4.   repo: git@github.com:xxxx/github.blog.git
  5.   branch: master

接着执行以下脚本

  1. # 清理
  2. hexo clean
  3. # 生成文件
  4. hexo g
  5. # 部署
  6. hexo d

观察到出现以下界面表示发布成功image.png

版本回退

有点突兀，但是最新版本3.x有两点我不好处理，就退回了2.8.2，第一个就是新版本不支持Valine评论，第二点就是网络上很多配置尤其是文章栏目的调整，只有旧版本，我对前端也不是很了解，所以干脆退回了之前版本，省心

主题优化

基本配置

主要修改默认信息，主要包括

  • 作者信息
  • 菜单栏的值替换
  • 头像的替换
  • 社交链接填写
  • Valine评论功能
  • 捐赠信息

具体可以参照以下

  1. # Version of the Icarus theme that is currently used
  2. version: 2.8.1
  3. # Path or URL to the website's icon
  4. favicon: /images/favicon.svg
  5. # Additional HTML meta tags in an array.
  6. meta: 
  7. # Path or URL to RSS atom.xml
  8. rss: 
  9. # Path or URL to the website's logo to be shown on the left of the navigation bar or footer
  10. logo: /images/logo.svg
  11. # Open Graph metadata
  12. # https://hexo.io/docs/helpers.html#open-graph
  13. open_graph:
  14.     # Facebook App ID
  15.     fb_app_id: 
  16.     # Facebook Admin ID
  17.     fb_admins: 
  18.     # Twitter ID
  19.     twitter_id: 
  20.     # Twitter site
  21.     twitter_site: 
  22.     # Google+ profile link
  23.     google_plus: 
  24. # Navigation bar link settings
  25. navbar:
  26.     # Navigation bar menu links
  27.     menu:
  28.         # 首页
  29.         首页: /
  30.         # 归档
  31.         归档: /archives
  32.         # 分类
  33.         分类: /categories
  34.         # 标签
  35.         标签: /tags
  36.         #友链
  37.         #友链: /friends/
  38.         # 关于
  39.         #关于: /about/
  40.     # Navigation bar links to be shown on the right
  41.     # links:
  42.     #     Download on GitHub:
  43.     #         icon: fab fa-github
  44.     #         url: 'https://github.com/ppoffice/hexo-theme-icarus'
  46. # Footer section link settings
  47. footer:
  48.     # Links to be shown on the right of the footer section
  49.     links:
  50.         Creative Commons:
  51.             icon: fab fa-creative-commons
  52.             url: 'https://creativecommons.org/'
  53.         Attribution 4.0 International:
  54.             icon: fab fa-creative-commons-by
  55.             url: 'https://creativecommons.org/licenses/by/4.0/'
  56.         # Download on GitHub:
  57.         #     icon: fab fa-github
  58.         #     url: 'https://github.com/ppoffice/hexo-theme-icarus'
  59. # Article display settings
  60. article:
  61.     # Code highlight settings
  62.     highlight:
  63.         # Code highlight themes
  64.         # https://github.com/highlightjs/highlight.js/tree/master/src/styles
  65.         theme: atom-one-light
  66.         # Show code copying button
  67.         clipboard: true
  68.         # Default folding status of the code blocks. Can be "", "folded", "unfolded"
  69.         fold: unfolded
  70.     # Whether to show article thumbnail images
  71.     thumbnail: true
  72.     # Whether to show estimate article reading time
  73.     readtime: true
  74. # Search plugin settings
  75. # https://ppoffice.github.io/hexo-theme-icarus/categories/Plugins/Search
  76. search:
  77.     # Name of the search plugin
  78.     type: insight
  79. # Comment plugin settings
  80. # https://ppoffice.github.io/hexo-theme-icarus/categories/Plugins/Comment
  81. comment:
  82.     type: valine
  83.     enable: true
  84.     shortname: 孙博文
  85.     app_id: 你的app_id
  86.     app_key: 你的app_key
  87.     notify: true # mail notifier , https://github.com/xCss/Valine/wiki
  88.     verify: true # Verification code
  89.     placeholder: 说点什么吧... # comment box placeholder
  90.     avatar: retro # gravatar style
  91.     guest_info: nick,mail,link # custom comment header
  92.     pageSize: 10 # pagination size 
  93. # Donation entries
  94. # https://ppoffice.github.io/hexo-theme-icarus/categories/Plugins/Donation
  95. donate:
  96.     -
  97.         type: alipay
  98.         # Alipay qrcode image URL
  99.         qrcode: 'images/alipay.jpg'
  100.     -
  101.         type: wechat
  102.         # Wechat qrcode image URL
  103.         qrcode: 'images/wechat.png'
  104. # Share plugin settings
  105. # https://ppoffice.github.io/hexo-theme-icarus/categories/Plugins/Share
  106. share:
  107.     # Share plugin name
  108.     type: sharejs
  109. # Sidebar settings.
  110. # Please be noted that a sidebar is only visible when it has at least one widget
  111. sidebar:
  112.     # left sidebar settings
  113.     left:
  114.         # Whether the left sidebar is sticky when page scrolls
  115.         # https://ppoffice.github.io/hexo-theme-icarus/Configuration/Theme/make-a-sidebar-sticky-when-page-scrolls/
  116.         sticky: false
  117.     # right sidebar settings
  118.     right:
  119.         # Whether the right sidebar is sticky when page scrolls
  120.         # https://ppoffice.github.io/hexo-theme-icarus/Configuration/Theme/make-a-sidebar-sticky-when-page-scrolls/
  121.         sticky: false
  122. # Sidebar widget settings
  123. # https://ppoffice.github.io/hexo-theme-icarus/categories/Widgets/
  124. widgets:
  125.     -
  126.         # Widget name
  127.         type: profile
  128.         # Where should the widget be placed, left or right
  129.         position: left
  130.         # Author name to be shown in the profile widget
  131.         author: 孙博文
  132.         # Author title
  133.         author_title: 我胖虎好TM想打人
  134.         # Author's current location
  135.         location: 中国 安徽
  136.         # URL or path to the avatar image
  137.         avatar: images/avatar.jpg
  138.         # 头像显示为圆还是方
  139.         avatar_rounded: false
  140.         # Email address for the Gravatar
  141.         gravatar: 
  142.         # URL or path for the follow button
  143.         follow_link: 'https://github.com/bwensun'
  144.         # Links to be shown on the bottom of the profile widget
  145.         social_links:
  146.             Github:
  147.                 icon: fab fa-github
  148.                 url: 'https://github.com/bwensun'
  149.             网易云:
  150.                 icon: fa fa-music
  151.                 url: 'https://music.163.com/#/user/home?id=73195716'
  152.             豆瓣:
  153.                 icon: fa fa-film
  154.                 url: 'https://www.douban.com/people/176248529/'
  155.             RSS:
  156.                 icon: fas fa-rss
  157.                 url: /
  158.     -
  159.         # Widget name
  160.         type: toc
  161.         # Where should the widget be placed, left or right
  162.         position: left
  163.     -
  164.         # Widget name
  165.         type: links
  166.         # Where should the widget be placed, left or right
  167.         position: left
  168.         # Links to be shown in the links widget
  169.         links:
  170.             daiwenzh5: 'https://daiwenzh5.github.io'
  171.             zoombar: 'http://139.224.224.177/'
  172.     -
  173.         # Widget name
  174.         type: category
  175.         # Where should the widget be placed, left or right
  176.         position: left
  177.     -
  178.         # Widget name
  179.         type: tagcloud
  180.         # Where should the widget be placed, left or right
  181.         position: left
  182.     -
  183.         # Widget name
  184.         type: recent_posts
  185.         # Where should the widget be placed, left or right
  186.         position: left
  187.     # -
  188.     #     # Widget name
  189.     #     type: archive
  190.     #     # Where should the widget be placed, left or right
  191.     #     position: right
  192.     # -
  193.     #     # Widget name
  194.     #     type: tag
  195.     #     # Where should the widget be placed, left or right
  196.     #     position: right
  197. # Other plugin settings
  198. plugins:
  199.     # Enable page animations
  200.     animejs: true
  201.     # Enable the lightGallery and Justified Gallery plugins
  202.     # https://ppoffice.github.io/hexo-theme-icarus/Plugins/General/gallery-plugin/
  203.     gallery: true
  204.     # Enable the Outdated Browser plugin
  205.     # http://outdatedbrowser.com/
  206.     outdated-browser: true
  207.     # Enable the MathJax plugin
  208.     # https://ppoffice.github.io/hexo-theme-icarus/Plugins/General/mathjax-plugin/
  209.     mathjax: true
  210.     # Show the back to top button on mobile devices
  211.     back-to-top: true
  212.     # Google Analytics plugin settings
  213.     # https://ppoffice.github.io/hexo-theme-icarus/Plugins/General/site-analytics-plugin/#Google-Analytics
  214.     google-analytics:
  215.         # Google Analytics tracking id
  216.         tracking_id: 
  217.     # Baidu Analytics plugin settings
  218.     # https://ppoffice.github.io/hexo-theme-icarus/Plugins/General/site-analytics-plugin/#Baidu-Analytics
  219.     baidu-analytics:
  220.         # Baidu Analytics tracking id
  221.         tracking_id: 
  222.     # Hotjar user feedback plugin
  223.     # https://ppoffice.github.io/hexo-theme-icarus/Plugins/General/site-analytics-plugin/#Hotjar
  224.     hotjar:
  225.         # Hotjar site id
  226.         site_id: 
  227.     # Show a loading progress bar at top of the page
  228.     progressbar: true
  229.     # BuSuanZi site/page view counter
  230.     # https://busuanzi.ibruce.info
  231.     busuanzi: false
  232.     # 51计数
  233.     tj51la: true
  234. # CDN provider settings
  235. # https://ppoffice.github.io/hexo-theme-icarus/Configuration/Theme/speed-up-your-site-with-custom-cdn/
  236. providers:
  237.     # Name or URL of the JavaScript and/or stylesheet CDN provider
  238.     cdn: jsdelivr
  239.     # Name or URL of the webfont CDN provider
  240.     fontcdn: google
  241.     # Name or URL of the webfont Icon CDN provider
  242.     iconcdn: fontawesome

其他功能

网站三栏变两栏

这个项目被提及最多的就是这个文章内容的布局，它的内容宽度过少，导致看起来很不舒服，作者也提到了关于这个问题的解决方案，有关这个问题的讨论可见https://github.com/ppoffice/hexo-theme-icarus/issues/434，这里只说下具体措施

  1. 修改source/css/style.styl文件中的media样式

    1. @media screen and (min-width: screen-widescreen)
    2.  .is-1-column .container
    3.  .is-2-column .container
    4.      max-width: screen-widescreen - 2 * gap
    5.      width: screen-widescreen - 2 * gap
    6. @media screen and (min-width: screen-fullhd)
    7.  .is-2-column .container
    8.      max-width: screen-fullhd - 2 * gap
    9.      width: screen-fullhd - 2 * gap
    10.  .is-1-column .container
    11.      max-width: screen-desktop - 2 * gap
    12.      width: screen-desktop - 2 * gap

  2. 修改一下layout/layout.ejs和layout/common/widget.ejs的文件内容

    1.  <% function main_column_class() {
    2.      switch (column_count()) {
    3.          case 1:
    4.              return 'is-12';
    5.          case 2:
    6.              return 'is-8-tablet is-9-desktop is-9-widescreen';
    7.          case 3:
    8.              return 'is-8-tablet is-8-desktop is-6-widescreen'
    9.      }
    10.      return '';
    11.  } %>
    1. <% function side_column_class() {
    2.  switch (column_count()) {
    3.      case 2:
    4.          return 'is-4-tablet is-3-desktop is-3-widescreen';
    5.      case 3:
    6.          return 'is-4-tablet is-4-desktop is-3-widescreen';
    7.  }
    8.  return '';
    9. } %>

    Hexo拉取语雀文档到博客

    语雀的博客我一直在写，它对于markdown的语法支持，以及干净的界面让你可以关注于内容，而不是花里胡哨的界面，界面如下image.png
    所以以后也会一直把首要更新放到语雀上面来，后拉取语雀文档刷新博客，关于这一点，语雀已经做了
    官方的文档：
    我想了下，还是写上具体的步骤

  3. NMP安装插件

    1. npm i -g yuque-hexo

  4. 获取自己的Token

头像 -> 账户设置 -> Token

  1. 在blog目录下package.json中添加红线标注内容 ```json { “name”: “hexo-site”, “version”: “0.0.0”, “private”: true, “scripts”: { “build”: “hexo generate”, “clean”: “hexo clean”, “deploy”: “hexo deploy”, “server”: “hexo server” }, “hexo”: { “version”: “4.2.1” }, ————————————add start———————————————————————————— “yuqueConfig”: { “postPath”: “source/_posts/yuque”, “token”: “你的TOKEN”, “cachePath”: “yuque.json”, “mdNameFormat”: “title”, “adapter”: “hexo”, “concurrency”: 5, “baseUrl”: “https://www.yuque.com/api/v2“, “login”: “guyuefangyuan”, “repo”: “blog”, “onlyPublished”: false, “onlyPublic”: false }, ————————————-add end————————————————————————————- “dependencies”: { “bulma-stylus”: “^0.8.0”, “cheerio”: “^1.0.0-rc.3”, “hexo”: “^4.2.1”, “hexo-component-inferno”: “^0.2.7”, “hexo-deployer-git”: “^2.1.0”, “hexo-generator-archive”: “^1.0.0”, “hexo-generator-category”: “^1.0.0”, “hexo-generator-index”: “^1.0.0”, “hexo-generator-tag”: “^1.0.0”, “hexo-permalink-pinyin”: “^1.1.0”, “hexo-renderer-ejs”: “^1.0.0”, “hexo-renderer-inferno”: “^0.1.3”, “hexo-renderer-marked”: “^2.0.0”, “hexo-renderer-stylus”: “^1.1.0”, “hexo-server”: “^1.0.0”, “inferno”: “^7.4.2”, “inferno-create-element”: “^7.4.2”, “social-share.js”: “^1.0.16” } }
  2. 4. 在blog目录下新建yuque.json，这个文件不用写，是用来做语雀相关的缓存的，但必须得有
  3. 4. 执行命令拉取语雀文档
  4. ```shell
  5. yuque-hexo sync

可以观看到日志上的拉取内容，在post文件夹中也会多出来yuque文件夹，里面是语雀文档申城的md文件

设置语雀模板来简化标签分类以及more操作

为了文档的美观和使用方便，都会添加上文章的分类和标签，并且会将文章前言部分之后内容做隐藏，一般完成的文章会像这样
image.png
可以在语雀中自定义一个模板，将这些默认项都添加上去

  1. # 博客标题
  3. tags: [tag1,tag2]<br />categories: [分类]
  5. ---
  7. <a name="iOsWy"></a>
  8. ## 前言
  10. <br />
  11. <br />
  12. <br /><-- more -->

总结

博客弄起来是真的很折腾，我之后也不会再改这个样式了，会将注意力转到内容上来，另外我发现很多网上的东西写的没头没尾，浪费我很多的时间，写的人总是站在自己的角度考虑问题，一些自己走过的坑会下意识的忽略掉，这可能就是为什么网络上教程都是成功的，按着来都是错误的原因吧，写东西毕竟是给人看的，我如果看不明白，那就是有问题的。