Tranquilpeak主题修改编译

首先进入theme目录,克隆tranquilpeak主题

cd themes
git clone https://github.com/kakawait/hugo-tranquilpeak-theme.git tranquilpeak_0.47beta"
cd tranquilpeak_0.47beta

然后修改src/scss/themes/_hljs-custom.scss

根据_hljs-custom.scss文件的内容提示

// Highlight.js custom theme
// Follow guidelines
// 1. Uncomment the block just below - remove `/*` and `*/`
// 2. Fill `background`, `color`, `border-right-color` properties
// with properties of `.hljs` CSS class of your theme
// 3. Put your theme where it's indicated just below
// 4. Remove `.hljs {...}` rules
// 5. Remove `hljs-` of all CSS class name. E.g : `.hljs-comment` becomes `.comment`
// 6. Comment line 61 (`'themes/tranquilpeak',`) of `source/_css/tranquilpeak.scss` file
// 7. Run `grunt buildProd` to build the theme and see the result
// Default code block

// Highlight.js自定义主题
//遵循指南
// 1.取消注释下面的块 - 删除`/ *`和`* /`
// 2.填充`background，`color`，`border-right-color`属性
//具有主题的`.hljs` CSS类属性
// 3.将您的主题放在下方所示的位置
// 4.删除`.hljs {...}`规则
// 5.删除所有CSS类名的`hljs -`。 例如：`.hljs-comment`变为`.comment`
// 6.注释`source / _css / tranquilpeak.scss`文件的第61行（`'themes / tranquilpeak'，`）
// 7.运行`grunt buildProd`来构建主题并查看结果

修改成下面的样子，我个人使用的是solarized-dark样式

// Highlight.js custom theme
// Follow guidelines
// 1. Uncomment the block just below - remove `/*` and `*/`
// 2. Fill `background`, `color`, `border-right-color` properties
// with properties of `.hljs` CSS class of your theme
// 3. Put your theme where it's indicated just below
// 4. Remove `.hljs {...}` rules
// 5. Remove `hljs-` of all CSS class name. E.g : `.hljs-comment` becomes `.comment`
// 6. Comment line 61 (`'themes/tranquilpeak',`) of `source/_css/tranquilpeak.scss` file
// 7. Run `grunt buildProd` to build the theme and see the result
// Default code block

// Highlight.js自定义主题
//遵循指南
// 1.取消注释下面的块 - 删除`/ *`和`* /`
// 2.填充`background，`color`，`border-right-color`属性
//具有主题的`.hljs` CSS类属性
// 3.将您的主题放在下方所示的位置
// 4.删除`.hljs {...}`规则
// 5.删除所有CSS类名的`hljs -`。 例如：`.hljs-comment`变为`.comment`
// 6.注释`source / _css / tranquilpeak.scss`文件的第61行（`'themes / tranquilpeak'，`）
// 7.运行`grunt buildProd`来构建主题并查看结果
//默认代码块
/*
pre > code {
    background: #002b36;
    color: #839496;
}

// Default inline code
code {
    background-color: #002b36;
}
*/
pre > code {
  background: #f7f8f8;
  color: #aaa;
}

// Default inline code
code {
  background-color: #f7f8f8;
}


// Tabbed code block tab
// If your theme is dark then use a lighter background
// to see clearly which tab is active
.codeblock--tabbed figcaption .tab.active {
    background: #002b36;
    color: #839496;
}

// highlight code block
figure.highlight,
.codeblock {
    background: #002b36;
    color: #839496;

    figcaption {
        background: #002b36;
        color: #839496;
    }
    .gutter {
        background: #002b36;
        border-right-color: #f7f8f8;
        .line {
            color: #839496;
        }
    }
    // PUT YOUR THEME HERE
      /* Solarized Green */
  .keyword,
  .selector-tag,
  .addition {
    color: #859900;
  }
  
  /* Solarized Cyan */
  .number,
  .string,
  .meta .meta-string,
  .literal,
  .doctag,
  .regexp {
    color: #2aa198;
  }
  
  /* Solarized Blue */
  .title,
  .section,
  .name,
  .selector-id,
  .selector-class {
    color: #268bd2;
  }
  
  /* Solarized Yellow */
  .attribute,
  .attr,
  .variable,
  .template-variable,
  .class .title,
  .type {
    color: #b58900;
  }
  
  /* Solarized Orange */
  .symbol,
  .bullet,
  .subst,
  .meta,
  .meta .keyword,
  .selector-attr,
  .selector-pseudo,
  .link {
    color: #cb4b16;
  }
  
  /* Solarized Red */
  .built_in,
  .deletion {
    color: #dc322f;
  }
  
  .formula {
    background: #073642;
  }
  
  .emphasis {
    font-style: italic;
  }
  
  .strong {
    font-weight: bold;
  }

}

修改tranquilpeak.scss

然后修改src\scss\tranquilpeak.scss第66行，把 ‘themes/hljs-tranquilpeak’,注释掉

修改完成后，即可编译

npm install
npm install grunt-cli -g
grunt buildProd

如果有问题的话，可以先安装

npm run start

Running "watch" task
Waiting...

的时候直接ctrl+c