Posted 2024-02-26Updated 2023-09-18category1 level1 / category1 level224 minutes read (About 3591 words)

hexo command

Usage: hexo <command>

Commands:
clean Remove generated files and cache.
config Get or set configurations.
deploy Deploy your website.
generate Generate static files.
help Get help on a command.
init Create a new Hexo folder.
list List the information of the site
migrate Migrate your site from other system to Hexo.
new Create a new post.
publish Moves a draft post from _drafts to _posts folder.
render Render files with renderer plugins.
server Start the server.
version Display version information.

Global Options:
–config Specify config file instead of using _config.yml
–cwd Specify the CWD(change working diretory)
–debug Display all verbose messages in the terminal
–draft Display draft posts
–safe Disable all plugins and scripts
–silent Hide output on console

hexo install and setup

Install Hexo

Once all the requirements are installed, you can install Hexo with npm:

$ npm install -g hexo-cli

setup

Once Hexo is installed, run the following commands to initialize Hexo in the target <folder>.

1
2
3

hexo init <folder>
cd <folder>
npm install

eg:

1 2	hexo init . npm install

icarus install and setup

INSTALL from source

Download the source code tarball from the GitHub and extract it to your Hexo site’s theme directory. Alternatively, you can use Git to clone the Icarus repository to the themes directory:

Git Bash/Shell

git clone https://github.com/ppoffice/hexo-theme-icarus.git themes/icarus -b <version number> --depth 1

You can omit -b <version number> to get the latest development version of Icarus. Leave –depth 1 out if you want to download full Git commit history of Icarus as well.

eg:

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

icarus setup

要将themes/icarus文件夹中的 package.json 中的 dependencies 内容拷贝并添加到主目录的package.json 中
Next, activate Icarus in your site’s _config.yml file:

_config.yml
1
theme: icarus
or use the hexo command to change the theme to Icarus:
Shell command:
hexo config theme icarus
然后

npm install
再

use the hexo command to change the theme to Icarus:

Shell
hexo config theme icarus

这时根据提示

1
2
3

ERROR Package hexo-renderer-stylus's version (3.0.0) does not satisfy the required version (^2.0.0).
ERROR Please install the missing dependencies your Hexo site root directory:
ERROR npm install --save hexo-renderer-stylus@^2.0.0

git setup

create a new repository on the command line

eg:

git init
git add .
git commit -m "first commit"
git branch -M main
git remote add origin https://github.com/lucfe2010/lucfe-hexo-private-1.git
git push -u origin main

注意提示

1
2
3

hint: You've added another git repository inside your current repository.
hint: Clones of the outer repository will not contain the contents of
hint: the embedded repository and will not know how to obtain it.

清除icarus主题文件夹的 GIT 和 GITHUB

使用 windows file explore删除 icarus主题文件夹中的.git文件夹

然后

git rm -r –cached .
git add .

git 用法

git init
git add .
git commit -m “first commit”
git branch -M main
git push -u origin main

git remote

git remote -v：列出当前仓库中已配置的远程仓库，并显示它们的 URL。

git remote add
git remote add <remote_name> <remote_url>
添加一个新的远程仓库。指定一个远程仓库的名称和 URL，将其添加到当前仓库中。如
git remote add lucfe-clone https://github.com/lucfe2010/lucfe-hexo-61.git
git remote add origin https://github.com/lucfe2010/lucfe-private-91.git
git remote remove
git remote remove <remote_name>
git remote remove origin

hexo config

basic config

language

language 是与主题相关的

site url

change the url to the website url of your own
url: http://lucfe2010.github.io/lucfe-hexo

permalink

Permalinks
You can specify the permalinks for your site in _config.yml or in the front-matter for each post.

Variables
Besides the following variables, you can use any attributes in the permalink.

:category -> Categories. If the post is uncategorized, it will use the default_category value.

Change
permalink: ':year/:month/:day/:title/'
to
permalink: ':title/'

Global Asset Folder

Global Asset Folder
Assets are non-post files in the source folder, such as images, CSS or JavaScript files. For instance, If you are only going to have a few images in the Hexo project, then the easiest way is to keep them in a source/images directory. Then, you can access them using something like ![](/images/image.jpg).

For vscode copy images

Use vscode open the source folder as project folder to create and edit the posts

change the the image relative path link
assets/images/<post title>/*.jpg
or
../../assets/images/<post title>/*.jpg
to the project directory absolute path link
/assets/images/<post title>/*.jpg

dont use Post Asset Folder

or any kind of post asset image link plugin, there are lots of bugs!

hexo server

With the release of Hexo 3, the server has been separated from the main module. To start using the server, you will first have to install hexo-server.

$ npm install hexo-server --save

Once the server has been installed, run the following command to start the server. Your website will run at http://localhost:4000 by default. When the server is running, Hexo will watch for file changes and update automatically so it’s not necessary to manually restart the server.

$ hexo server

Static Mode

In static mode, only files in the public folder will be served and file watching is disabled. You have to run hexo generate before starting the server. Usually used in production.

$ hexo server -s

Git deploy

Install hexo-deployer-git.
$ npm install hexo-deployer-git --save

Edit _config.yml (with example values shown below as comments):

deploy:
  type: git
  repo: <repository url> # https://bitbucket.org/JohnSmith/johnsmith.bitbucket.io
  branch: [branch]
  message: [message]

Option	Description	Default
repo	URL of the target repository
branch	Branch name.	gh-pages (GitHub)
message	Customize commit message.	Site updated: `{{ now('YYYY-MM-DD HH:mm:ss') }}`
token	Optional token value to authenticate with the repo. Prefix with $ to read token from environment variable

deploy:
  type: git
  repo: https://github.com/lucfe2010/lucfe-hexo.git
  branch: master
  message:

Deploy your site hexo clean && hexo deploy.
- You will be prompted with username and password of the target repository, unless you authenticate with a token or ssh key.
- hexo-deployer-git does not store your username and password. Use git-credential-cache to store them temporarily.
Navigate to your repository settings and change the “Pages” branch to gh-pages (or the branch specified in your config). The deployed site should be live on the link shown on the “Pages” setting.
注意在部署的REPOSITORY主目录下加入.jekyll文件

部署步骤
每次部署的步骤，可按以下三步来进行。

hexo clean

hexo generate

hexo deploy

注意

.deploy_git 文件夹不能删除，会造成push错误文件夹。
如果删除了，要重新卸载并安装hexo-deployer-git.
$ npm uninstall hexo-deployer-git --save
$ npm install hexo-deployer-git --save

icarus config

Logo

设置你站点的logo。此logo会显示在导航栏和页脚。 logo配置的值既可以是你的logo图片的路径或URL地址：

_config.icarus.yml
logo: /img/logo.svg
也可以像下面这样设置成文字：

1 2	logo: text: My Beautiful Site

本站设为

1 2	logo: text: Lucfe Knowledges

Favicon

你可以在head配置中指定你的网站favicon的路径或URL地址。

1 2	head: favicon: /img/favicon.svg

RSS

你可以通过head部分的rss设置来添加RSS链接信息。

1 2	head: rss: /path/to/atom.xml

本站设为

1 2	head: rss: /atom.xml

导航栏

navbar部分定义了导航栏中的菜单与链接。你可以通过向menu设置项中添加<链接名>: <链接URL>的方式添加任意导航栏菜单链接。如要向导航栏右侧添加链接，请向links设置项中添加<链接名>: <链接URL>。

navbar:
    # 导航栏菜单项
    menu:
        Home: /
        Archives: /archives
        Categories: /categories
        Tags: /tags
        About: /about
    # 导航栏右侧的链接
    links:
        GitHub: 'https://github.com'
        Download on GitHub:
            icon: fab fa-github
            # url: 'https://github.com/ppoffice/hexo-theme-icarus'
            url: 'https://github.com/lucfe2010/lucfe-hexo'

你也可以使用FontAwesome图标来作为纯文字链接的替换，格式如下：

链接格式

1
2
3

<链接名>:
    icon: <FontAwesome图标的class名>
    url: <链接URL>

页脚

footer部分定义了页脚右侧的链接。链接的配置格式与navbar中links的配置格式完全一致。

你也可以在页脚展示自定义版权文字：\

1 2	footer: copyright: 用💖发电

文章

封面 & 缩略图

若要为文章添加封面图，请在文章的front-matter中添加cover选项：

post.md

title: Icarus快速上手
cover: /gallery/covers/cover.jpg
---
Post content...

类似地，你也可以在文章的front-matter中为文章设置缩略图：

post.md

title: Icarus快速上手
thumbnail: /gallery/thumbnails/thumbnail.jpg

---
Post content...

文章的缩略图会显示在归档页面和最新文章挂件中。

如果你在front-matter中使用的是图片的路径，你需要确保它是绝对或者相对于你的source目录的路径。例如，为使用<your blog>/source/gallery/image.jpg作为缩略图，你需要在front-matter中使用/gallery/image.jpg作为图片路径。

文章许可协议

你可以在你的文章/页面的底部展示你的作品的使用许可，许可链接可以是文字或者图标。这里的配置与导航栏或者页脚的links配置一致：

article:
    # 文章许可协议
    licenses:
        Creative Commons:
            icon: fab fa-creative-commons
            url: 'https://creativecommons.org/'
        'CC BY-NC-SA 4.0': 'https://creativecommons.org/licenses/by-nc-sa/4.0/'

一些元数据

文章阅读时间
你可以将article部分的readtime设置为true来显示文章字数统计以及预计阅读时间。
文章更新时间
若要显示文章的更新时间，请在文章的front_matter中设置updated时间：

post.md

title: Icarus快速上手
updated: 2020-04-01 00:00:00

---
Post content...

然后，将主题配置文件的article部分的update_time设置为true：

你也可以将update_time设置为false来隐藏所有文章的更新时间，或设置为auto而在文章的更新时间与发布时间相同时隐藏更新时间。

文章许可协议
你可以在你的文章/页面的底部展示你的作品的使用许可，许可链接可以是文字或者图标。这里的配置与导航栏或者页脚的links配置一致：

wiget挂件

页面挂件的安装配置。若要同时展示多个挂件，只需在主题配置的widgets数组中添加多个挂件配置。它们会按照定义的顺序出现。每个挂件必须包含type(挂件类型)与position(挂件展示位置)设置项。示例如下：

widgets:
    -
        type: ... # 挂件1
        position: left
        ...
    -
        type: ... # 挂件2
        position: right
        ...

布局配置文件

布局配置文件遵循着与主题配置文件相同的格式和定义。 _config.post.yml中的配置对所有文章生效，而_config.page.yml中的配置对所有自定义页面生效。这两个文件将覆盖主题配置文件中的配置。

例如，你可以在_config.post.yml中把所有文章变为两栏布局：

widgets:
    -
        type: recent_posts
        position: left
    -
        type: categories
        position: left
    -
        type: tags
        position: left

同时所有其他页面仍保持三栏布局：

widgets:
    -
        type: recent_posts
        position: left
    -
        type: categories
        position: right
    -
        type: tags
        position: right

作者资料卡profile

你可以启用作者资料卡挂件来展示文章作者/网站站长的信息。资料卡的配置如下所示：

如果你希望使用Gravatar而不是avatar配置项作为头像图片，请在gravatar项填入你的Gravatar邮箱地址并在avatar一项中留空；

本站使用的如下

Alt text

social_links可以采用如下两种格式：

图标形式：

<链接名称>:
    icon: <FontAwesome5_图标的_HTML_class名称>
    url: <链接的URL地址>

文字形式：

<链接名称>: <链接的URL地址>

文章目录 toc

需要开启目录的文章头部加入toc: true：

title: 一篇有目录的文章
toc: true
---
文章内容...

其他

文章归档 archives

文章分类 categories

文章标签 tags

widgets:
    -
        position: right
        type: tags
        order_by: name      # 可选项。按名称(name)或长度(length)来排序。加上`-`前缀来倒序排列。
        amount: 20          # 可选项。最多显示的标签数量。留空以显示所有标签。
        show_count: true    # 可选项。是否显示标签名称右侧的文章数量。

友站链接 links

widgets:
    -
        position: left
        type: links
        # 友站名称与链接
        links:
            Hexo: 'https://hexo.io'
            Bulma: 'https://bulma.io'

plugin widgets

Google Feedburner

Google即将关闭Feedburner的邮件订阅功能。你可以切换到follow.it挂件或者其他邮件订阅服务。

在Google AdSense上新建广告。然后，复制广告HTML代码中的data-ad-client和data-ad-slot值分别填入到挂件配置的client_id和slot_id项中。示例如下：

widgets:
    -
        position: left
        type: adsense
        client_id: ca-pub-xxxxxxxx
        slot_id: xxxxxxx

install and set hexo-generator-feed

install

$ npm install hexo-generator-feed --save

You can configure this plugin in _config.yml.

feed:
  enable: true
  type: atom
  path: atom.xml
  limit: 20
  hub:
  content:
  content_limit: 140
  content_limit_delim: ' '
  order_by: -date
  icon: /assets/images/rss_icon_l.png
  autodiscovery: true
  template:

Alt text

follow.it

使用诸如hexo-generator-feed此类的Hexo插件生成你的Hexo网站的RSS源。

https://lucfe2010.github.io/lucfe-hexo/atom.xml
在FOLLOW.IT 网站一步步
“定义关注表单设计”(Define the follow form’s design)页面上already have a form

复制action=后双引号中的链接。把你复制的action链接粘贴到挂件配置中的action_url设置项。
在”连接你的源到follow.it账户“(Connect your feed to a follow.it account)页面上，在输入框中填入你将要用来注册follow.it账户和管理订阅者的邮箱地址。
你会收到一封来自follow.it的邮件。在那封邮件中搜索<meta name="follow_it-verification-code" content="******"/>并复制content=后双引号中的content的值。将你复制的值粘贴到挂件设置中的verification_code设置项。
回到你收到的第一封邮件并点击”点击这里来认领“(Click here to claim it)链接来认领你的订阅源。

Alt text

icarus plugin seting

Google Analytics

在追踪代码(Tracking Code)界面上找到Tracking ID的值，例如”UA-12345678-0”. 将其填写到主题配置的plugins > google_analytics > tracking_id即可开启Google Analytics插件。

用户评论

disqus

在评论服务首页的右上角点击“编辑配置”(Edit Settings)按钮。

Alt text

在“为你的站点配置Disqus”(Configure Disqus for Your Site)页面上找到“Shortname”的值，复制到主题配置的评论配置项中。例如，下面截图中的“Shortname”为my-hexo-blog-1：

Alt text

畅言

Alt text

复制appid与conf的值到主题配置的对应配置项中。例如，如下的HTML代码：

<!--PC版-->
<div id="SOHUCS" sid="..."></div>
<script charset="utf-8" type="text/javascript" src="https://cy-cdn.kuaizhan.com/upload/changyan.js" ></script>
<script type="text/javascript">
window.changyan.api.config({
    appid: '????appid????',
    conf: 'prod_xxxxxxxxxxxxxxxxxxxxxxx'
});
</script>

对应到主题配置为：

comment:
    type: changyan
    app_id: appid
    conf: prod_xxxxxxxxxxxxxxxxxxxxxxx

分享按钮

copy the src URL from the HTML code fragment to the share button configuration.

Alt text

For example, the following ShareThis code:

<script type="text/javascript" src="https://platform-api.sharethis.com/js/sharethis.js#property=xxxxxxxxxxxxx&product=inline-share-buttons" async="async"></script>

maps to the following theme configuration:

1
2
3

share:
    type: sharethis
    install_url: https://platform-api.sharethis.com/js/sharethis.js#property=xxxxxxxxxxxxx&product=inline-share-buttons

for china web connecting

disable these plugins

business or payment
feedburn
google ad sense
google analytics
sharethis
changyan comments
disqus commnets
cookie consent
follow.it

disable these links and font icons

article licsence links
footer links
navbar links

CDN提供商 change cdn provider

内置CDN提供商
目前，Icarus提供如下的内置CDN服务提供商：

JavaScript库CDN
cdnjs.com (cdnjs)
jsDelivr (jsdelivr)
UNPKG (unpkg)
loli.net (loli)
Web字体CDN
Google Fonts (google)
loli.net (loli)
font.im (fontim)
中国科学技术大学 (ustc)
FontAwesome图标CDN
FontAwesome 5 (fontawesome)
loli.net (loli)

默认的CDN服务提供商配置为：

providers:
    cdn: jsdelivr
    fontcdn: google
    iconcdn: fontawesome

修改为：

providers:
    cdn: cdnjs
    fontcdn: loli
    iconcdn: loli

Posted 2024-02-26Updated 2023-09-11category1 level1 / category1 level223 minutes read (About 3406 words)

hexo theme develop

hexo theme variables

site

Site Variables
Variable Description Type
site.posts All posts array of post objects
site.pages All pages array of page objects
site.categories All categories array of categories objects
site.tags All tags array of tags objects

config

config: {
    title: 'Lucfe Knowledge Documentation',
    subtitle: '',
    description: '',
    author: 'lucfe',
    language: 'en',
    timezone: '',
    url: 'http://lucfe2010.github.io/lucfe-hexo',
    root: '/lucfe-hexo/',
    permalink: ':title/',
    permalink_defaults: null,

    ...

}

language

<html lang={language ? language.substr(0, 2) : ''}>

config.head

_config.yml
head:
# URL or path to the website’s icon
favicon: /assets/images/favicon_l.png
# Web application manifests configuration
# https://developer.mozilla.org/en-US/docs/Web/Manifest
manifest:
# Name of the web application (default to the site title)
name:

    ...

meta:
rss

{rss ? <link rel="alternate" href={url_for(rss)} title={config.title} type="application/atom+xml" /> : null}

config.head.favicon

head:
# URL or path to the website’s icon
favicon: /assets/images/favicon_l.png

{favicon ? <link rel="icon" href={url_for(favicon)} /> : null}

article

article:
# Code highlight settings
highlight:
# Code highlight themes
# https://github.com/highlightjs/highlight.js/tree/master/src/styles
theme: atom-one-light

article highlight theme

highlight

variant = ‘default’
# the theme variant 'default' or 'cyberpunk'

see cnd

let hlTheme, images;
if (highlight && highlight.enable === false) {
hlTheme = null;
} else if (article && article.highlight && article.highlight.theme) {
hlTheme = article.highlight.theme;
} else {
hlTheme = ‘atom-one-light’;
}

title

config.title
site title

page

page: {
    base: '',
    total: 1,
    current: 1,
    current_url: '',
    posts: _Query { data: [Array], length: 5 },
    prev: 0,
    prev_link: '',
    next: 0,
    next_link: '',
    __index: true,
    path: 'index.html',
    lang: 'en',
    canonical_path: 'index.html'
  }

article (page)

Variable Description Type
page.title Article title string
page.date Article created date Moment.js object
page.updated Article last updated date Moment.js object
page.comments Comment enabled or not boolean
page.layout Layout name string
page.content The full processed content of the article string
page.excerpt Article excerpt string
page.more Contents except article excerpt string
page.source The path of the source file string
page.full_source Full path of the source file string
page.path The URL of the article without root URL. We usually use url_for(page.path) in theme. string
page.permalink Full (encoded) URL of the article string
page.prev The previous post, null if the post is the first post ???
page.next The next post, null if the post is the last post ???
page.raw The raw data of the article ???
page.photos The photos of the article (Used in gallery posts) array of ???
page.link The external link of the article (Used in link posts) string

Post (post):

Same as page layout but add the following variables.

Variable Description Type
page.published True if the post is not a draft boolean
page.categories All categories of the post array of ???
page.tags All tags of the post array of ???

Home (index)

Variable Description Type
page.per_page Posts displayed per page number
page.total Total number of pages number
page.current Current page number number
page.current_url The URL of current page string
page.posts Posts in this page (Data Model) object
page.prev Previous page number. 0 if the current page is the first. number
page.prev_link The URL of previous page. ‘’ if the current page is the first. string
page.next Next page number. 0 if the current page is the last. number
page.next_link The URL of next page. ‘’ if the current page is the last. string
page.path The URL of current page without root URL. We usually use url_for(page.path) in theme. string

Archive (archive):

Same as index layout but add the following variables.

Variable Description Type
page.archive Equals true boolean
page.year Archive year (4-digit) number
page.month Archive month (2-digit without leading zeros) number

page.month page.year

Category (category):

Same as index layout but add the following variables.

Variable Description Type
page.category Category name string

Tag (tag):

Same as index layout but add the following variables.

Variable Description Type
page.tag Tag name string

page.permalink

Full (encoded) URL of the article string

canonical_url = page.permalink

{canonical_url ? <link rel="canonical" href={canonical_url} /> : null}

hexo theme helpers

helper: {
    date: [Function: bound dateHelper],
    date_xml: [Function: bound toISOString],
    time: [Function: bound timeHelper],
    full_date: [Function: bound fullDateHelper],
    relative_date: [Function: bound relativeDateHelper],
    time_tag: [Function: bound timeTagHelper],
    moment: [Function: bound hooks],
    search_form: [Function: bound moized(searchFormHelper)],
    strip_html: [Function: bound striptags],
    trim: [Function: bound ],
    titlecase: [Function: bound toTitleCase],
    word_wrap: [Function: bound wordWrap],
    truncate: [Function: bound truncate],
    escape_html: [Function: bound escapeHTML],
    fragment_cache: [Function: bound fragmentCache],
    gravatar: [Function: bound gravatarHelper],
    is_current: [Function: bound isCurrentHelper],
    is_home: [Function: bound isHomeHelper],
    is_home_first_page: [Function: bound isHomeFirstPageHelper],
    is_post: [Function: bound isPostHelper],
    is_page: [Function: bound isPageHelper],
    is_archive: [Function: bound isArchiveHelper],
    is_year: [Function: bound isYearHelper],
    is_month: [Function: bound isMonthHelper],
    is_category: [Function: bound isCategoryHelper],
    is_tag: [Function: bound isTagHelper],
    list_archives: [Function: bound listArchivesHelper],
    list_categories: [Function: bound listCategoriesHelper],
    list_tags: [Function: bound listTagsHelperFactory],
    list_posts: [Function: bound listPostsHelper],
    meta_generator: [Function: bound metaGeneratorHelper],
    open_graph: [Function: bound openGraphHelper],
    number_format: [Function: bound numberFormatHelper],
    paginator: [Function: bound paginatorHelper],
    partial: [Function: bound partial],
    markdown: [Function: bound markdownHelper],
    render: [Function: bound render],
    css: [Function: bound moized(cssHelper)],
    js: [Function: bound moized(jsHelper)],
    link_to: [Function: bound linkToHelper],
    mail_to: [Function: bound moized(mailToHelper)],
    image_tag: [Function: bound imageTagHelper],
    favicon_tag: [Function: bound faviconTagHelper],
    feed_tag: [Function: bound feedTagHelper],
    tagcloud: [Function: bound tagcloudHelperFactory],
    tag_cloud: [Function: bound tagcloudHelperFactory],
    toc: [Function: bound tocHelper],
    relative_url: [Function: bound ],
    url_for: [Function: bound ],
    full_url_for: [Function: bound ],
    inspect: [Function: bound inspectObject],
    log: [Function: bound log],
    cdn: [Function: bound ],
    fontcdn: [Function: bound ],
    iconcdn: [Function: bound ],
    is_categories: [Function: bound ],
    is_tags: [Function: bound ],
    __: [Function (anonymous)],
    _p: [Function (anonymous)]
  }

Templates

partial
Loads other template files. You can define local variables in locals.

<%- partial(layout, [locals], [options]) %>
Option Description Default
cache Cache contents (Use fragment cache) false
only Strict local variables. Only use variables set in locals in templates. false
fragment_cache
Caches the contents in a fragment. It saves the contents within a fragment and serves the cache when the next request comes in.

<%- fragment_cache(id, fn);
Examples:

<%- fragment_cache(‘header’, function(){
return ‘

‘;
}) %>

Conditional Tags

is_current
Check whether path matches the URL of the current page. Use strict options to enable strict matching.

<%- is_current(path, [strict]) %>
is_home
Check whether the current page is home page.

<%- is_home() %>
is_post
Check whether the current page is a post.

<%- is_post() %>
is_archive
Check whether the current page is an archive page.

<%- is_archive() %>
is_year
Check whether the current page is a yearly archive page.

<%- is_year() %>
is_month
Check whether the current page is a monthly archive page.

<%- is_month() %>
is_category
Check whether the current page is a category page.
If a string is given as parameter, check whether the current page match the given category.

<%- is_category() %>
<%- is_category(‘hobby’) %>

is_tag
Check whether the current page is a tag page.
If a string is given as parameter, check whether the current page match the given tag.

<%- is_tag() %>
<%- is_tag(‘hobby’) %>

helper.is_post()

helper.is_archive()

https://lucfe2010.github.io/lucfe-hexo/archives/

helper.is_month()

https://lucfe2010.github.io/lucfe-hexo/archives/2023/09/

helper.is_year()

https://lucfe2010.github.io/lucfe-hexo/archives/2023/

helper._p()

Templates
Use __ or _p helpers in templates to get the translated strings. The former is for normal usage and the latter is for plural strings. For example:

en.yml
index:
title: Home
add: Add
video:
zero: No videos
one: One video
other: %d videos
<%= __(‘index.title’) %>
// Home

<%= _p(‘index.video’, 3) %>
// 3 videos

helper._p(‘common.archive’, Infinity);

if (helper.is_tag()) {
title = helper._p(‘common.tag’, 1) + ‘: ‘ + page.tag;
}

if (helper.is_categories()) {
title = helper._p(‘common.category’, Infinity);}

URL

url_for
Returns a url with the root path prefixed. You should use this helper instead of config.root + path since Hexo 2.7.

<%- url_for(path) %>

gravatar
Inserts a Gravatar image.

<%- gravatar(‘a@abc.com‘ {s: 40, d: ‘http://example.com/image.png'}) %>
// http://www.gravatar.com/avatar/b9b00e66c6b8a70f88c73cb6bdb06787?s=40&d=http%3A%2F%2Fexample.com%2Fimage.png

url_for

cdn fontcdn and iconcdn

cdn()

{hlTheme ? <link rel="stylesheet" href={cdn('highlight.js', '11.7.0', 'styles/' + hlTheme + '.css')} /> : null}

hlTheme

fontcdn()

<link rel="stylesheet" href={fontCssUrl[variant]} />

const fontCssUrl = {
            default: fontcdn('Ubuntu:wght@400;600&family=Source+Code+Pro', 'css2'),
            cyberpunk: fontcdn('Oxanium:wght@300;400;600&family=Roboto+Mono', 'css2')
        };

iconcdn()

<link rel="stylesheet" href={iconcdn()} />

HTML Tags

css

<%- css(‘style.css’) %>
//

<%- js(‘script.js’) %>
//

link_to

<%- link_to(‘http://www.google.com‘, ‘Google’, {external: true}) %>
// Google

image_tag
favicon_tag
feed_tag

List

Inserts a list of all categories.

<%- list_categories([options]) %>
Option Description Default
orderby Order of categories name
order Sort of order. 1, asc for ascending; -1, desc for descending 1
show_count Display the number of posts for each category true
style Style to display the category list. list displays categories in an unordered list. list
separator Separator between categories. (Only works if style is not list) ,
depth Levels of categories to be displayed. 0 displays all categories and child categories; -1 is similar to 0 but displayed in flat; 1 displays only top level categories. 0
class Class name of category list. category
transform The function that changes the display of category name.
suffix Add a suffix to link. None

Inserts a list of all tags.

<%- list_tags([options]) %>
Option Description Default
orderby Order of categories name
order Sort of order. 1, asc for ascending; -1, desc for descending 1
show_count Display the number of posts for each tag true
style Style to display the tag list. list displays tags in an unordered list. list
separator Separator between categories. (Only works if style is not list) ,
class Class name of tag list. tag
transform The function that changes the display of tag name.
amount The number of tags to display (0 = unlimited) 0
suffix Add a suffix to link. None

list_archives

Inserts a list of archives.

<%- list_archives([options]) %>
Option Description Default
type Type. This value can be yearly or monthly. monthly
order Sort of order. 1, asc for ascending; -1, desc for descending 1
show_count Display the number of posts for each archive true
format Date format MMMM YYYY
style Style to display the archive list. list displays archives in an unordered list. list
separator Separator between archives. (Only works if style is not list) ,
class Class name of archive list. archive
transform The function that changes the display of archive name.

list_posts

Inserts a list of posts.

<%- list_posts([options]) %>
Option Description Default
orderby Order of posts date
order Sort of order. 1, asc for ascending; -1, desc for descending 1
style Style to display the post list. list displays posts in an unordered list. list
separator Separator between posts. (Only works if style is not list) ,
class Class name of post list. post
amount The number of posts to display (0 = unlimited) 6
transform The function that changes the display of post name.

Inserts a tag cloud.

<%- tagcloud([tags], [options]) %>
Option Description Default
min_font Minimal font size 10
max_font Maximum font size 20
unit Unit of font size px
amount Total amount of tags 40
orderby Order of tags name
order Sort order. 1, sac as ascending; -1, desc as descending 1
color Colorizes the tag cloud false
start_color Start color. You can use hex (#b700ff), rgba (rgba(183, 0, 255, 1)), hsla (hsla(283, 100%, 50%, 1)) or color keywords. This option only works when color is true.
end_color End color. You can use hex (#b700ff), rgba (rgba(183, 0, 255, 1)), hsla (hsla(283, 100%, 50%, 1)) or color keywords. This option only works when color is true.

Miscellaneous

paginator
Inserts a paginator.

<%- paginator(options) %>
Option Description Default
base Base URL /
format URL format page/%d/
total The number of pages 1
current Current page number 0
prev_text The link text of previous page. Works only if prev_next is set to true. Prev
next_text The link text of next page. Works only if prev_next is set to true. Next
space The space text &hellp;
prev_next Display previous and next links true
end_size The number of pages displayed on the start and the end side 1
mid_size The number of pages displayed between current page, but not including current page 2
show_all Display all pages. If this is set true, end_size and mid_size will not works. false

toc
Parses all heading tags (h1~h6) in the content and inserts a table of contents.

Date & Time

date
Inserts formatted date. date can be unix time, ISO string, date object, or Moment.js object. format is date_format setting by default.

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

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

<%- date(Date.now(), ‘YYYY/M/D’) %>
// Jan 1 2013
date_xml
Inserts date in XML format. date can be unix time, ISO string, date object, or Moment.js object.

<%- date_xml(date) %>
Examples:

<%- date_xml(Date.now()) %>
// 2013-01-01T00:00:00.000Z
time
Inserts formatted time. date can be unix time, ISO string, date object, or Moment.js object. format is time_format setting by default.

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

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

<%- time(Date.now(), ‘h:mm:ss a’) %>
// 1:05:12 pm
full_date
Inserts formatted date and time. date can be unix time, ISO string, date object, or Moment.js object. format is date_format + time_format setting by default.

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

<%- 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

<%- toc(str, [options]) %>
Option Description Default
class Class name toc
list_number Displays list number true
max_depth Maximum heading depth of generated toc 6
Examples:

<%- toc(page.content) %>

inferno

Component

Class component:

import { Component } from 'inferno';

class MyComponent extends Component {
  render() {
    ...
  }
}

class declare

export declare class Component<P = {}, S = {}> implements IComponent<P, S> {
    state: S | null;
    props: {
        children?: InfernoNode;
    } & P;
    context: any;
    displayName?: string;
    refs?: any;

    ...

    constructor(props?: P, context?: any);

    ...

    render(_nextProps: P, _nextState: S, _nextContext: any): InfernoNode | undefined;
}

This is the base class for Inferno Components when they’re defined using ES6 classes.

icarus theme COMPONENTS

js regex Pattern

1
2
3

let img;
const imgPattern = /<img [^>]*src=['"]([^'"]+)([^>]*>)/gi;
img = imgPattern.exec(page.content);

body

the rendered html from another layout files.
也就是layout文件夹第一层的中去除layout.jsx的其他*.jsx文件

OpenGraph and Structured Data

<OpenGraph
    type="blog"
    title="Page title"
    language="Page language"
    description="Page description"
    date="Page publish date"
    updated="Page update date"
    author="Page author"
    keywords="keyword1,keyword2,..."
    images={[ '/path/to/image.png' ]}
    url="/path/to/page"
    siteName="Site name"
    twitterId="Twitter ID"
    twitterCard="summary"
    twitterSite="Twitter Site"
    googlePlus="/path/to/google/plus"
    facebookAdmins="Facebook admin ID"
    facebookAppId="Facebook APP ID" />



<StructuredData
    title="Page title"
    url="/page/url"
    author="Page author name"
    publisher="Page publisher name"
    publisherLogo="/path/to/logo"
    description="Page description"
    images={[ '/path/to/image' ]}
    date="Page publish date"
    updated="Page update date" />

meta tags

<MetaTags meta={meta} />

<Meta meta={[
    'name="generator";content="Hexo 4.2.0"'
    'property="article:author";content="PPOffice"'
]} />

WebApp

<WebApp
    name="******"
    manifest="/path/to/manifest.json"
    tileIcon="/path/to/image"
    themeColor="#000000"
    icons={[
        { src: '/path/to/image', sizes: '128x128 256x256' },
        { src: '/path/to/image', sizes: '512x512' },
    ]} />

followIt

{followItVerificationCode ? <meta name="follow.it-verification-code" content={followItVerificationCode} /> : null}

let followItVerificationCode = null;
if (Array.isArray(config.widgets)) {
const widget = config.widgets.find(widget => widget.type === ‘followit’);
if (widget) {
followItVerificationCode = widget.verification_code;
}
}

hexo theme develop example

languages 文件夹放有一个或多个语言文件。

layout 文件夹下面用于存放页面文件，通常第一层有 Index 首页、 Archive 归档页、 Tag 标签页、 Category 分类页、 Post 文章页、 Page 页面详情页、 layout 布局，一般还会创建一个公共页面的文件夹，该文件夹用于放置一个页面的部分内容，用于复用。

source 文件夹用于放一些资源文件，例如：字体、 CSS 、 JS 、图片等，也会根据他们的文件类型进行再次分类，图片放到图片的文件夹，JS 放到 JS 的文件夹。

先从 layout.ejs 文件开始，该文件是布局文件，其他页面都按照其来进行渲染，编写时遵循 HTML5 规范

<!DOCTYPE html>
<html lang="<%= config.language %>">
<head>
    <%- partial('common/head') %>
</head>
<body>
    <%- partial('common/header') %>
    <div class="wrapper">
        <%- body %>
    </div>
    <%- partial('common/footer') %>
</body>
</html>

config.language 表示使用根目录配置文件中 language 属性，假设配置文件中该属性填的是 zh-CN ，则最终渲染成。

partial() 用于引入公共布局，当引用后，每个页面都会存在你引用的这个布局，上面一共引用了三个文件 head 、 header 、 footer ，三个文件都在 common 文件夹下，这时候应该建立该文件夹，并在下面创建对应的三个 ejs 文件。假设 head.ejs 中的内容为 this is head ，最终渲染成如下：（每个页面都会存在此内容）

this is head <%- body %> 表示其他页面内容，例如： index.ejs 、 archive.ejs 等，假设 index.ejs 内容为 this is index ，则最终渲染成如下：（因为是写在首页文件中，所以只有首页会存在该内容）

this is index

Hexo 预置数据即变量

post.ejs 文件内容如下：

<%= page.title %>

<%= page.tip %>

<%- page.content %>

一篇 md 文章内容如下：

---
title: 这是一篇文章
tip: hexo 开发

---

主内容...
文章页面最终渲染成：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    head
</head>
<body>
    header
    <div class="wrapper">
        <div class="post">
            <h1>这是一篇文章</h1>
            <p>hexo 开发</p>
            <div class="post-content">
                主内容...
            </div>
        </div>
    </div>
    footer
</body>
</html>

下面做一个关于页面的例子：

首先在根目录资源文件夹创建一个名为 about 的文件夹，再到该文件夹下创建一个 index.md 文件，内容为：

---
title: 关于
type: 'about'
---
这是一个关于页面内容

到主题文件夹中布局文件夹中创建一个 about.ejs 页面，内容为：

<%= page.title %>

<%- page.content %>

在 page.ejs 中引入 about.ejs <% if (is_page() && page.type === 'about') { %> // 该文件是其他页面的集合，所以得判断啥情况引入啥文件 <%- partial('about') %> <% } %>

// 假设引入友情链接文件
<% if (is_page() && page.type === ‘links’) { %> // is_page() 是啥请看官方文档 - 辅助函数
<%- partial(‘links’) %>
<% } %>
最终渲染结果

head header

关于

这是一个关于页面内容

footer

列表

官方文档中有 list_categories 、 list_posts 等函数，都有具体的使用方法，在这里对于列表我写出我常用的方法。

文章列表：

对于文章通常有两种，一种是每页只显示 config.per_page 数量的文章，带有分页，另外一种是一个页面显示所有文章。

// 带分页，使用 Hexo 预置变量 page.posts
<% page.posts.each(function(post) { %> // 因为这里有个对象 post

<% post.title %>

// 所以这里才可以用 post.title
<%- partial(‘common/post-card’, {post: post}) %> // 这时引用一个文件
<% }); %>

post-card 文件内容为：

<%= post.title %> // 这里是会报错的，无法通过

// 一个页面显示所有文章
<% site.posts.each(function(post) { %>

<% post.title %>

<%- partial(‘common/post-card’, {post: post}) %>
<% }); %>

主题中原有的 category.ejs 和 tag.ejs 文件都是属于单个对象的页面

category.ejs 页面只显示单个分类，当你点击分类 1 跳转过去的页面就是 category ，它不会显示出网站中所有的分类。

想要全部显示出来，需要自行创建一个页面categories 、 tags

Posted 2024-02-26Updated 2023-09-11category1 level1 / category1 level2a minute read (About 168 words)

javascript problems 1

`(0,function)(arg1,agr2,)`

1
2
3

(0, function (arg) { console.log(arg) })(2);
console.log((0, 1, 2, 3));
(0, function plus1 (arg) { console.log(arg + 1) }, function plus2 (arg) { console.log(arg + 2) })(5);

example one

(function() {
  (0,eval)("var foo = 123"); // indirect call to eval, creates global variable
})();
console.log(foo);            // 123
(function() {
  eval("var bar = 123");     // direct call to eval, creates local variable
})();
console.log(bar);            // ReferenceError

example two

when you want to call a method without passing the object as the this value:

var obj = {
  method: function() { return this; }
};
console.log(obj.method() === obj);     // true
console.log((0,obj.method)() === obj); // false

example three

depending on the context, it might be the arguments separator instead of a comma operator:

console.log(
  function(a, b) {
    return function() { return a; };
  }
  (0, function (arg) { /* ... */ })(this)
); // 0

In this scenario, (0, function (arg) { /* ... */ }) are the arguments (a=0, b=function (arg) { /* ... */ }) to the function

1
2
3

function(a, b) {
  return function() { return a; };
}

rather than the comma operator. Then, the (this) at the end is function call with argument this to the returned function function() { return a; }.

hexo command

hexo install and setup

Install Hexo

setup

icarus install and setup

INSTALL from source

icarus setup

git setup

清除icarus主题文件夹的 GIT 和 GITHUB

git 用法

git remote

hexo config

basic config

language

site url

permalink

Global Asset Folder

For vscode copy images

dont use Post Asset Folder

hexo server

Static Mode

Git deploy

注意

icarus config

Logo

Favicon

RSS

导航栏

页脚

文章

封面 & 缩略图

文章许可协议

一些元数据

wiget挂件

布局配置文件

作者资料卡profile

文章目录 toc

其他

最新文章 recent posts

文章归档 archives

文章分类 categories

文章标签 tags

友站链接 links

plugin widgets

Google Feedburner

Google AdSense

install and set hexo-generator-feed

follow.it

icarus plugin seting

Google Analytics

用户评论

disqus

畅言

分享按钮

share this

for china web connecting

disable these plugins

disable these links and font icons

CDN提供商 change cdn provider

hexo theme variables

site

config

language

config.head

config.head.favicon

article

article highlight theme

title

page

article (page)

Post (post):

Home (index)

Archive (archive):

page.month page.year

Category (category):

Tag (tag):

page.permalink

hexo theme helpers

Templates

Conditional Tags

Hexo 预置数据即变量

下面做一个关于页面的例子：

`(0,function)(arg1,agr2,)`