直接用bulma
直接引用bulma是十分簡單的
只需要在head.ejs末尾添加
<link rel="stylesheet" type="text/css">
<script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>
即可
如果你想修改bulma的參數(shù)，重新編譯scss蒿秦，則需做如下操作
引入bulma
npm install hexo-renderer-sass --save
npm install bulma --save
_config.yml
node_sass:
outputStyle: nested
precision: 5
sourceComments: false
有一個(gè)小知識點(diǎn)是hexo-renderer-sass官方未提及的
你必須在source/styles/xxx.scss 這個(gè)路徑下建立scss蛋济，這是解析scss的入口文件
題外話
里面你可以導(dǎo)入主題里面的scss@import "hexo-theme-doc/_doc.scss"如果想覆寫變量 可以這樣寫
$doc-color-primary: red; // set primary color to "red" @import "hexo-theme-doc/_doc.scss"
當(dāng)然 我們用bulma碗旅，所以可以這樣寫
@charset "utf-8";
@import "./node_modules/bulma/bulma.sass";
生成后，是在public/styles/doc.css位置下
修改主題head.ejs 末尾添加
<%- css('styles/doc') %>
至此 hexo就引入了bulma的源文件 下一步可以修改參數(shù)了
修改參數(shù)
修改參數(shù)就在doc.scss中修改即可
具體代碼可以看
這里是bulma官方的例子
@charset "utf-8";
// Import a Google Font
@import url('https://fonts.googleapis.com/css?family=Nunito:400,700');
// Set your brand colors
$purple: #8A4D76;
$pink: #FA7C91;
$brown: #757763;
$beige-light: #D0D1CD;
$beige-lighter: #EFF0EB;
// Update Bulma's global variables
$family-sans-serif: "Nunito", sans-serif;
$grey-dark: $brown;
$grey-light: $beige-light;
$primary: $purple;
$link: $pink;
$widescreen-enabled: false;
$fullhd-enabled: false;
// Update some of Bulma's component variables
$body-background-color: $beige-lighter;
$control-border-width: 2px;
$input-border-color: transparent;
$input-shadow: none;
// Import only what you need from Bulma
@import "./node_modules/bulma/sass/utilities/_all.sass";
@import "./node_modules/bulma/sass/base/_all.sass";
@import "./node_modules/bulma/sass/elements/button.sass";
@import "./node_modules/bulma/sass/elements/container.sass";
@import "./node_modules/bulma/sass/elements/form.sass";
@import "./node_modules/bulma/sass/elements/title.sass";
@import "./node_modules/bulma/sass/components/navbar.sass";
@import "./node_modules/bulma/sass/layout/hero.sass";
@import "./node_modules/bulma/sass/layout/section.sass";
至此 可以隨心所欲的跟布爾瑪玩耍啦~
