Hexo 輔助函數(shù)

2020-10-20 17:10 更新

輔助函數(shù)幫助您在模版中快速插入內(nèi)容。輔助函數(shù)不能在源文件中使用。

網(wǎng)址

url_for

在路徑前加上根路徑,從 Hexo 2.7 開始您應(yīng)該使用此函數(shù)而不是 config.root + path。


<%- url_for(path, [option]) %>
參數(shù) 描述 默認值
relative 是否輸出相對鏈接 config.relative_link 的值

示例:

_config.yml
root: /blog/
<%- url_for('/a/path') %>
// /blog/a/path

是否輸出相對鏈接,默認遵循配置文件中 relative_link 的值
例如, post/page 的相對路徑值可能是 /foo/bar/index.html

_config.yml
relative_link: true

<%- url_for('/css/style.css') %>
// ../../css/style.css
/* 覆蓋配置
 * 即使配置文件中啟用了 relative_link,你也可以使用 relative 參數(shù)禁用相對鏈接輸出,反之亦然
 */
<%- url_for('/css/style.css', {relative: false}) %>
// /css/style.css

relative_url

取得與 from 相對的 to 路徑。

<%- relative_url(from, to) %>

示例:

<%- relative_url('foo/bar/', 'css/style.css') %>
// ../../css/style.css

gravatar

根據(jù)郵箱地址返回 Gravatar 頭像 URL。

如果你不指定 options 參數(shù),將會應(yīng)用默認參數(shù)。否則,你可以將其設(shè)置為一個數(shù)字,這個數(shù)字將會作為 Gravatar 的大小參數(shù)。最后,如果你設(shè)置它一個對象,它將會被轉(zhuǎn)換為 Gravatar 的一個查詢字符串參數(shù)。

<%- gravatar(email, [options]) %>
參數(shù) 描述 默認值
s 圖片大小 80
d 默認頭像
f 強制使用默認圖象
r 頭像等級限制

訪問 Gravatar 了解更多。

示例:

<%- gravatar('a@abc.com') %>
// https://www.gravatar.com/avatar/b9b00e66c6b8a70f88c73cb6bdb06787

<%- gravatar('a@abc.com', 40) %>
// https://www.gravatar.com/avatar/b9b00e66c6b8a70f88c73cb6bdb06787?s=40

<%- gravatar('a@abc.com' {s: 40, d: 'https://via.placeholder.com/150'}) %>

// https://www.gravatar.com/avatar/b9b00e66c6b8a70f88c73cb6bdb06787?s=40&d=https%3A%2F%2Fvia.placeholder.com%2F150

full_url_for

在路徑前加上根路徑和域名。輸出會被自動轉(zhuǎn)碼。

<%- full_url_for(path) %>

示例:

_config.yml
url: https://example.com/blog # example

<%- full_url_for('/a/path') %>
// https://example.com/blog/a/path

HTML 標簽

css

載入 CSS 文件。path 可以是數(shù)組或字符串,如果 path 開頭不是 / 或任何協(xié)議,則會自動加上根路徑;如果后面沒有加上 .css 擴展名的話,也會自動加上。Use object type for custom attributes.

<%- css(path, ...) %>

示例:

<%- css('style.css') %>
// <link rel="stylesheet" href="/style.css">

<%- css(['style.css', 'screen.css']) %>
// <link rel="stylesheet" href="/style.css">
// <link rel="stylesheet" href="/screen.css">

<%- css({ href: 'style.css', integrity: 'foo' }) %>
// <link rel="stylesheet" href="/style.css" integrity="foo">

<%- css([{ href: 'style.css', integrity: 'foo' }, { href: 'screen.css', integrity: 'bar' }]) %>
// <link rel="stylesheet" href="/style.css" integrity="foo">
// <link rel="stylesheet" href="/screen.css" integrity="bar">

js

載入 JavaScript 文件。path 可以是數(shù)組或字符串,如果 path 開頭不是 / 或任何協(xié)議,則會自動加上根路徑;如果后面沒有加上 .js 擴展名的話,也會自動加上。Use object type for custom attributes.

<%- js(path, ...) %>

示例:

<%- js('script.js') %>
// <script src="/script.js"></script>

<%- js(['script.js', 'gallery.js']) %>
// <script src="/script.js"></script>
// <script src="/gallery.js"></script>

<%- js({ src: 'script.js', integrity: 'foo', async: true }) %>
// <script src="/script.js" integrity="foo" async></script>

<%- js([{ src: 'script.js', integrity: 'foo' }, { src: 'gallery.js', integrity: 'bar' }]) %>
// <script src="/script.js" integrity="foo"></script>
// <script src="/gallery.js" integrity="bar"></script>

link_to

插入鏈接。

<%- link_to(path, [text], [options]) %>
參數(shù) 描述 默認值
external 在新視窗打開鏈接 false
class Class 名稱
id ID

示例:

<%- link_to('http://www.google.com') %>
// <a  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  title="http://www.google.com">http://www.google.com</a>

<%- link_to('http://www.google.com', 'Google') %>
// <a  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  title="Google">Google</a>

<%- link_to('http://www.google.com', 'Google', {external: true}) %>
// <a  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  title="Google" target="_blank" rel="noopener">Google</a>

mail_to

插入電子郵箱鏈接。

<%- mail_to(path, [text], [options]) %>
參數(shù) 描述
class Class 名稱
id ID
subject 郵件主題
cc 抄送(CC)
bcc 密送(BCC)
body 郵件內(nèi)容

示例:

<%- mail_to('a@abc.com') %>
// <a href="mailto:a@abc.com" title="a@abc.com">a@abc.com</a>

<%- mail_to('a@abc.com', 'Email') %>
// <a href="mailto:a@abc.com" title="Email">Email</a>

image_tag

插入圖片。

<%- image_tag(path, [options]) %>
參數(shù) 描述
alt 圖片的替代文字
class Class 名稱
id ID
width 圖片寬度
height 圖片高度

favicon_tag

插入 favicon。

<%- favicon_tag(path) %>

feed_tag

插入 feed 鏈接。

<%- feed_tag(path, [options]) %>
參數(shù) 描述 默認值
title Feed 標題 config.title
type Feed 類型 atom

示例:

<%- feed_tag('atom.xml') %>
// <link rel="alternate" href="/atom.xml" title="Hexo" type="application/atom+xml">

<%- feed_tag('rss.xml', { title: 'RSS Feed', type: 'rss' }) %>
// <link rel="alternate" href="/atom.xml" title="RSS Feed" type="application/rss+xml">

/* Defaults to hexo-generator-feed's config if no argument */
<%- feed_tag() %>
// <link rel="alternate" href="/atom.xml" title="Hexo" type="application/atom+xml">

條件函數(shù)

is_current

檢查 path 是否符合目前頁面的網(wǎng)址。開啟 strict 選項啟用嚴格比對。

<%- is_current(path, [strict]) %>

is_home

檢查當前頁面是否為首頁。

<%- is_home() %>

is_post

檢查當前頁面是否為文章。

<%- is_post() %>

is_page

檢查當前頁面是否為獨立頁面。

<%- is_page() %>

is_archive

檢查當前頁面是否為存檔頁面。

<%- is_archive() %>

is_year

檢查當前頁面是否為年度歸檔頁面。

<%- is_year() %>

is_month

檢查當前頁面是否為月度歸檔頁面。

<%- is_month() %>

is_category

檢查當前頁面是否為分類歸檔頁面。
如果給定一個字符串作為參數(shù),將會檢查目前是否為指定分類。

<%- is_category() %>
<%- is_category('hobby') %>

is_tag

檢查當前頁面是否為標簽歸檔頁面。
如果給定一個字符串作為參數(shù),將會檢查目前是否為指定標簽。

<%- is_tag() %>
<%- is_tag('hobby') %>

字符串處理

trim

清除字符串開頭和結(jié)尾的空格。

<%- trim(string) %> 

strip_html

清除字符串中的 HTML 標簽。

<%- strip_html(string) %>

示例:

<%- strip_html('It\'s not <b>important</b> anymore!') %>
// It's not important anymore!

titlecase

把字符串轉(zhuǎn)換為正確的 Title case。

<%- titlecase(string) %>

示例:

<%- titlecase('this is an apple') %>
# This is an Apple

markdown

使用 Markdown 解析字符串。

<%- markdown(str) %>

示例:

<%- markdown('make me **strong**') %>
// make me <strong>strong</strong>

render

解析字符串。

<%- render(str, engine, [options]) %>

Examples:

<%- render('p(class="example") Test', 'pug'); %>
// <p class="example">Test</p>

See Rendering for more details.

word_wrap

使每行的字符串長度不超過 lengthlength 預(yù)設(shè)為 80。

<%- word_wrap(str, [length]) %>

示例:

<%- word_wrap('Once upon a time', 8) %>
// Once upon\n a time

truncate

移除超過 length 長度的字符串。length 的默認值是 30。

<%- truncate(text, length) %>

示例:

<%- truncate('Once upon a time in a world far far away', {length: 17}) %>
// Once upon a ti...

<%- truncate('Once upon a time in a world far far away', {length: 17, separator: ' '}) %>
// Once upon a...

<%- truncate('And they found that many people were sleeping better.', {length: 25, omission: '... (continued)'}) %>
// And they f... (continued)

模板

partial

載入其他模板文件,您可在 locals 設(shè)定區(qū)域變量。

<%- partial(layout, [locals], [options]) %>
參數(shù) 描述 默認值
cache 緩存(使用 Fragment cache) false
only 限制局部變量。在模板中只能使用 locals 中設(shè)定的變量。 false

fragment_cache

局部緩存。它儲存局部內(nèi)容,下次使用時就能直接使用緩存。

<%- fragment_cache(id, fn);

示例:

<%- fragment_cache('header', function(){
  return '<header></header>';
}) %>

日期與時間

date

插入格式化的日期。date 可以是 UNIX 時間、ISO 字符串、Date 對象或 Moment.js 對象。format 默認為 date_format 配置信息。

<%- date(date, [format]) %>

示例:

<%- date(Date.now()) %>
// 2013-01-01

<%- date(Date.now(), 'YYYY/M/D') %>
// Jan 1 2013

date_xml

插入 XML 格式的日期。date 可以是 UNIX 時間、ISO 字符串、Date 對象或 Moment.js 對象。

<%- date_xml(date) %>

示例:


<%- date_xml(Date.now()) %>
// 2013-01-01T00:00:00.000Z

time

插入格式化的時間。date 可以是 UNIX 時間、ISO 字符串、Date 對象或 Moment.js 對象。format 默認為 time_format 配置信息。

<%- time(date, [format]) %>

示例:

<%- time(Date.now()) %>
// 13:05:12

<%- time(Date.now(), 'h:mm:ss a') %>
// 1:05:12 pm

full_date

插入格式化的日期和時間。date 可以是 UNIX 時間、ISO 字符串、Date 對象或 Moment.js 對象。format 默認為 date_format + time_format

<%- full_date(date, [format]) %>

示例:

<%- full_date(new Date()) %>
// Jan 1, 2013 0:00:00

<%- full_date(new Date(), 'dddd, MMMM Do YYYY, h:mm:ss a') %>
// Tuesday, January 1st 2013, 12:00:00 am

moment

Moment.js 函數(shù)庫。

列表

list_categories

插入分類列表。

<%- list_categories([options]) %>
參數(shù) 描述 默認值
orderby 分類排列方式 name
order 分類排列順序。1, asc 升序;-1, desc 降序。 1
show_count 顯示每個分類的文章總數(shù) true
style 分類列表的顯示方式。使用 list 以無序列表(unordered list)方式顯示。 list
separator 分類間的分隔符號。只有在 style 不是 list 時有用。 ,
depth 要顯示的分類層級。0 顯示所有層級的分類;-10 很類似,但是顯示不分層級;1 只顯示第一層的分類。 0
class 分類列表的 class 名稱。 category
transform 改變分類名稱顯示方法的函數(shù)
suffix 為鏈接添加前綴 None

用例:


<%- list_categories(post.categories, {
  class: 'post-category',
  transform(str) {
    return titlecase(str);
  }
}) %>
 <%- list_categories(post.categories, {
  class: 'post-category',
  transform(str) {
    return str.toUpperCase();
  }
}) %>

list_tags

插入標簽列表。

<%- list_tags([options]) %>
選項 描述 預(yù)設(shè)值
orderby 標簽排列方式 name
order 標簽排列順序。1, asc 升序;-1, desc 降序。 1
show_count 顯示每個標簽的文章總數(shù) true
style 標簽列表的顯示方式。使用 list 以無序列表(unordered list)方式顯示。 list
separator 標簽間的分隔符號。只有在 style 不是 list 時有用。 ,
class Class name of tag list (string) or customize each tag’s class (object, see below). tag
transform 改變標簽名稱顯示方法的函數(shù)。請查看 list_categories 中給出的例子
amount 要顯示的標簽數(shù)量(0 = 無限制) 0
suffix 為鏈接添加前綴 None

Class advanced customization:

Option Description Default
class.ul <ul> class name (only for style list) tag-list (list style)
class.li <li> class name (only for style list) tag-list-item (list style)
class.a <a> class name tag-list-link (list style) tag-link (normal style)
class.count <span> class name where the tag counter is stored (only when show_count is true) tag-list-count (list style) tag-count (normal style)

Examples:

<%- list_tags(site.tags, {class: 'classtest', style: false, separator: ' | '}) %>
<%- list_tags(site.tags, {class: 'classtest', style: 'list'}) %>
<%- list_tags(site.tags, {class: {ul: 'ululul', li: 'lilili', a: 'aaa', count: 'ccc'}, style: false, separator: ' | '}) %>
<%- list_tags(site.tags, {class: {ul: 'ululul', li: 'lilili', a: 'aaa', count: 'ccc'}, style: 'list'}) %>

list_archives

插入歸檔列表。

<%- list_archives([options]) %>
參數(shù) 描述 默認值
type 類型。此設(shè)定可為 yearlymonthly。 monthly
order 排列順序。1, asc 升序;-1, desc 降序。 1
show_count 顯示每個歸檔的文章總數(shù) true
format 日期格式 MMMM YYYY
style 歸檔列表的顯示方式。使用 list 以無序列表(unordered list)方式顯示。 list
separator 歸檔間的分隔符號。只有在 style 不是 list 時有用。 ,
class 歸檔列表的 class 名稱。 archive
transform 改變歸檔名稱顯示方法的函數(shù)。請查看 list_categories 中給出的例子

list_posts

插入文章列表。

<%- list_posts([options]) %>
參數(shù) 描述 默認值
orderby 文章排列方式 date
order 文章排列順序。1, asc 升序;-1, desc 降序。 -1
style 文章列表的顯示方式。使用 list 以無序列表(unordered list)方式顯示。 list
separator 文章間的分隔符號。只有在 style 不是 list 時有用。 ,
class 文章列表的 class 名稱。 post
amount 要顯示的文章數(shù)量(0 = 無限制) 6
transform 改變文章名稱顯示方法的函數(shù)。請查看 list_categories 中給出的例子

tagcloud

插入標簽云。

<%- tagcloud([tags], [options]) %>
參數(shù) 描述 默認值
min_font 最小字體尺寸 10
max_font 最大字體尺寸 20
unit 字體尺寸的單位 px
amount 標簽總量 40
orderby 標簽排列方式 name
order 標簽排列順序。1, sac 升序;-1, desc 降序 1
color 使用顏色 false
start_color 開始的顏色。您可使用十六進位值(#b700ff),rgba(rgba(183, 0, 255, 1)),hsla(hsla(283, 100%, 50%, 1))或 顏色關(guān)鍵字。此變量僅在 color 參數(shù)開啟時才有用。
end_color 結(jié)束的顏色。您可使用十六進位值(#b700ff),rgba(rgba(183, 0, 255, 1)),hsla(hsla(283, 100%, 50%, 1))或 顏色關(guān)鍵字。此變量僅在 color 參數(shù)開啟時才有用。
class 標簽的 class name 前綴
level 不同 class name 的總數(shù)。此變量僅在 class 參數(shù)設(shè)定時才有用。 10

其他

paginator

插入分頁鏈接。

<%- paginator(options) %>
參數(shù) 描述 默認值
base 基礎(chǔ)網(wǎng)址 /
format 網(wǎng)址格式 page/%d/
total 分頁總數(shù) 1
current 目前頁數(shù) 0
prev_text 上一頁鏈接的文字。僅在 prev_next 設(shè)定開啟時才有用。 Prev
next_text 下一頁鏈接的文字。僅在 prev_next 設(shè)定開啟時才有用。 Next
space 空白文字
prev_next 顯示上一頁和下一頁的鏈接 true
end_size 顯示于兩側(cè)的頁數(shù) 1
mid_size 顯示于中間的頁數(shù) 2
show_all 顯示所有頁數(shù)。如果開啟此參數(shù)的話,end_sizemid_size 就沒用了。 false
escape Escape HTML tags true

Examples:

<%- paginator({
  prev_text: '<',
  next_text: '>'
}) %>
<!-- Rendered as -->
<a href="/1/">&lt;</a>
<a href="/1/">1</a>
2
<a href="/3/">3</a>
<a href="/3/">></a>
<%- paginator({
  prev_text: '<i class="fa fa-angle-left"></i>',
  next_text: '<i class="fa fa-angle-right"></i>',
  escape: false
}) %>
<!-- Rendered as -->
<a href="/1/"><i class="fa fa-angle-left"></i></a>
<a href="/1/">1</a>
2
<a href="/3/">3</a>
<a href="/3/"><i class="fa fa-angle-right"></i></a>

search_form

插入 Google 搜索框。

<%- search_form(options) %>
參數(shù) 描述 默認值
class 表單的 class name search-form
text 搜索提示文字 Search
button 顯示搜索按鈕。此參數(shù)可為布爾值(boolean)或字符串,當設(shè)定是字符串的時候,即為搜索按鈕的文字。 false

number_format

格式化數(shù)字。

<%- number_format(number, [options]) %>
參數(shù) 描述 默認值
precision 數(shù)字精度。此選項可為 false 或非負整數(shù)。 false
delimiter 千位數(shù)分隔符號 ,
separator 整數(shù)和小數(shù)之間的分隔符號 .

示例:

<%- number_format(12345.67, {precision: 1}) %>
// 12,345.68

<%- number_format(12345.67, {precision: 4}) %>
// 12,345.6700

<%- number_format(12345.67, {precision: 0}) %>
// 12,345

<%- number_format(12345.67, {delimiter: ''}) %>
// 12345.67

<%- number_format(12345.67, {separator: '/'}) %>
// 12,345/67

meta_generator

Inserts generator tag.

<%- meta_generator() %>

Examples:

<%- meta_generator() %>
// <meta name="generator" content="Hexo 4.0.0">

open_graph

插入 open graph 資源。

<%- open_graph([options]) %>
參數(shù) 描述 默認值
title 頁面標題 (og:title) page.title
type 頁面類型 (og:type) blog
url 頁面網(wǎng)址 (og:url) url
image 頁面圖片 (og:image) 內(nèi)容中的圖片
site_name 網(wǎng)站名稱 (og:site_name) config.title
description 頁面描述 (og:description) 內(nèi)容摘要或前 200 字
twitter_card Twitter 卡片類型 (twitter:card) summary
twitter_id Twitter ID (twitter:creator)
twitter_site Twitter 網(wǎng)站 (twitter:site)
google_plus Google+ 個人資料鏈接
fb_admins Facebook 管理者 ID
fb_app_id Facebook 應(yīng)用程序 ID

toc

解析內(nèi)容中的標題標簽 (h1~h6) 并插入目錄。

<%- toc(str, [options]) %>
參數(shù) 描述 默認值
class Class 名稱 toc
list_number 顯示編號 true
max_depth 生成 TOC 的最大深度 6
min_depth 生成 TOC 的最小深度 1

示例:

<%- toc(page.content) %>


以上內(nèi)容是否對您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號