VS Code Tasks Chrome

自動開啟瀏覽器來打開指定網址

{
    "label": "Chrome",
    "type": "process",
    "args": ["http://localhost:4000/"],
    "windows": {
        "command": "C:/Program Files (x86)/Google/Chrome/Application/chrome.exe"
    },
    "group":"test",
}

想在build或test的tasks完成後自動打開目標頁面可以加上dependsOn

{
    "label": "Hexo Server",
    "type": "shell",
    "command": "hexo server",       
    "group":"test",
},
{
    "label": "Chrome",
    "type": "process",
    "args": ["http://localhost:4000/"],
    "windows": {
        "command": "C:/Program Files (x86)/Google/Chrome/Application/chrome.exe"
    },
    "group":"test",
},
{
    "label": "Hexo Preview",
    "type": "process",
    "dependsOn": ["Hexo Server","Chrome"],
    "group": {
        "kind": "test",
        "isDefault": true
    }
}

這樣會在Tasks:Hexo Server完成後開啟瀏覽器來看結果

VS Code Hexo

VS Code HEXO 擴充套件

Demo

tasks.json

{
    // See https://go.microsoft.com/fwlink/?LinkId=733558 
    // for the documentation about the tasks.json format
    "version": "2.0.0",
    "tasks": [
        {
            "label": "Hexo Deploy",
            "type": "shell",
            "dependsOn": "Hexo Clean",
            "command": "hexo g --d",
            "group": {
                "kind": "build",
                "isDefault": true
            }
        },
        {
            "label": "Hexo Clean",
            "type": "shell",
            "command": "hexo clean",
            "group": "build"
        },
        {
            "label": "Hexo Server",
            "type": "shell",
            "command": "hexo server",       
            "group":"test",
        },
        {
            "label": "Hexo Preview",
            "type": "process",
            "dependsOn": "Hexo Server",
            "args": ["http://localhost:4000/"],
            "windows": {
                "command": "C:/Program Files (x86)/Google/Chrome/Application/chrome.exe"
            },
            "group": {
                "kind": "test",
                "isDefault": true
            }
        }
    ]
}

將VS Code打造成Hexo博客的最佳編輯器

Hexo EJS highlight

_config.yml

...
highlight:
  enable: false
...

footer.ejs

<% if (config.highlight != true) { %>
    <!-- Highlight.js -->
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.14.2/styles/atom-one-dark.min.css">
    <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.14.2/highlight.min.js"></script>
    <script>hljs.initHighlightingOnLoad();</script>
  <% } %>

Hexo 啟用評論 comments

_confid.yml

# Disqus
disqus_shortname: jakeuj

themes/xxxx/layout/_widget/recent_comment.ejs

<% if (page.comments){ %>
<section id="comment">
  <h1 class="title"><%= __('comment') %></h1>
  <% if (theme.comment_provider == "facebook") {
      if (theme.facebook) { %>
      <%- partial('_partial/facebook_comment', {fbConfig: theme.facebook}) %>
      <% } %>
  <% } else if(config.disqus_shortname) { %>
  <div id="disqus_thread">
    <noscript>Please enable JavaScript to view the <a href="//disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
  </div>
  <% } %>
</section>
<% } %>