定制化的Nico
项目 | 地址 | 说明 |
---|---|---|
nico | https://github.com/lepture/nico | 静态页面生成 |
spm-doc | https://github.com/spmjs/spm-doc | 参考例子 |
aralejs.org | https://github.com/aralejs/aralejs.org | 参考例子 |
本博客介绍 | Nico主题、官方提供的基础.文档也不是很多 | 需有代码基础 |
基础命令
nico server --watch --port 80
#80端口自动刷新页面需安装socket.io
npm install socket.io
字体排版
~~删除线~~ <s>删除线(开启识别HTML标签时)</s>
*斜体字* _斜体字_
**粗体** __粗体__
***粗斜体*** ___粗斜体___
上标:X<sub>2</sub>,下标:O<sup>2</sup>
[普通链接](http://localhost/)
[普通链接带标题](http://localhost/ "普通链接带标题")
直接链接:<https://github.com>
[锚点链接][link]
[锚点链接2][link2]
[link]: http://localhost/
[link2]: http://notedown.cn
============= 不解析
------------- 不解析
---- 换行
> 引用文本 Blockquotes
#Heading 1
##Heading 2
###Heading 3
####Heading 4
#####Heading 5
######Heading 6
First Header | Second Header
------------- | -------------
Content Cell | Content Cell
Content Cell | Content Cell
| Function name | Description |Right |
|------------- | -----------------------------: |-----:|
| col 2 is | centered | $12 |
| `destroy()` | **Destroy your computer!** | test |
#特殊符号
© & ¨ ™ ¡ £
& < > ¥ € ® ± ¶ § ¦ ¯ « ·
X² Y³ ¾ ¼ × ÷ »
18ºC " '
媒体排版

[](url "说明")
**目录 (Table of Contents)**[TOC] 在模版引擎已生成{{post.toc}}
- 列表一
- 列表二
- 列表三
* 列表一
* 列表二
* 列表三
1. 第一行
2. 第二行
3. 第三行
主题开发
想要开发自己的主题?其实很简单。官方案例one
结构
一个主题包含三个部分:主题的信息,模板,静态文件。它的文件目录结构如下:
_themes/
one/ - 官方案例主题名字.可在nico.json下更改
|-- theme.js - 主题的信息,自定义过滤器.加功能.重要
|-- templates/ - 模板
| |-- post.html
| |-- post.html
| `-- ...
`-- static/ - 存放 js、css 文件,这也是模块的部署目录
|-- app.css
|-- jquery.js
`-- ...
_site - 最终生成的静态页面
content/ - 文章 markdown 可以创建子文件夹
nico.json - 全局的设置与变量配置、可以定义json格式的数据.模版中获取
模板
Nico 使用 swig 做为模板引擎, swig-doc。
一个完备的主题应该包含:
post.html - PostWriter 文章,可全局调用 page.html - PageWriter 非文章页面,可全局调用 archive.html - ArchiveWriter, YearWriter, DirectoryWriter ... 文章分类.目录等--!本博客未使用 feed.html - FeedWriter
PostWriter
提示:PostWriter和PageWriter可在post或者page模版中调用
- post.title: 文章的标题
- post.meta: 文章的所有元数据
- post.pubdate: 文章的发布时间(only available in
post.html
) - post.tags: 文章的标签
- post.html: 渲染好的 html
- post.directory: 文章文件所在的目录
- post.status: 文章的状态
- post.toc: tabe of content of the post
以下是主题模版templates>post.html
附说明
{%- extends "layout.html" -%} #调用的是父类layout的html结构
{%- block title %}{{post.title |title}}{% endblock %} |title}} 为filter过滤器·把头英文大写
{%- block document %} #覆盖父类layout的document范围的block 同行代码同理
<div class="wrapper">
<article class="post" >
<ul class="breadcrumbs">
<li><a href="/">Home</a></li>
<li><a href="/{{ post.meta.parent }}/">{{ post.meta.parent |title}}</a></li>
<li><a href="/{{ post.meta.parent }}/{{ post.meta.category }}/">{{ post.meta.category |title}}</a></li>
#非nico自带的文章元素. 自定义的需要外加·post.meta·调用
<li class="current" itemprop="name headline">{{ post.title |title}}</li>
<li class="time"><time >{{post.pubdate|date('Y-m-d')}} #swig引擎的日期过滤器
</time></li>
</ul>
<div class="post-content" itemprop="articleBody">
{{post.toc}}
{{post.html|add_anchor|doc_api}} #添加自定义过滤器.可在theme.js定义
#post.html为Markdown解析后的html
</div>
<div id="messages" class="post-message">
</div>
</article>
</div>
{% endblock -%}
nico.json
全局配置:用户配置信息,所有的配置信息都可以通过 config 获取.以下是
nico.json
附说明
hide
{
"source": "blog",
"output": ".out",
"theme": "theme",
"permalink": "/{{filename}}.html",
"writers": [
"nico.PostWriter",
"nico.PageWriter",
"nico.FileWriter",
"nico.StaticWriter"
],
"navigation": [
{"title": "Life", "link": "life","description":""},
{"title": "Tools", "link": "tools","description":""},
{"title": "Collect", "link": "collect","description":""},
{"title": "mega data", "link": "database","description":""},
{"title": "Web Developer", "link": "web","description":"",
"child":[
{"title": "nico", "link": "nico","description":""},
{"title": "html", "link": "html","description":""},
{"title": "Javascript", "link": "javascript","description":""}
]},
{"title": "Java Programmer", "link": "java","description":""},
{"title": "Spring Framework", "link": "springframework","description":"",
"child":[
{"title": "Spring Framework mvc", "link": "springmvc","version":"4.16","description":""},
{"title": "Spring Data JPA", "link": "jpa","version":"4.16","description":""}
]}
]
}
模板中获取nico.json
下的复杂json数据
{%- if config.navigation %}
{%- for item in config.navigation %}
{{item.title}} #第一层数据已经获取到了
{%- set childs = item.child %}
{%- if childs|length > 0 %}
{%- for child in childs %}
{{child.title}}
{%- endfor %}
{%- endif %}
{%- endfor %}
{%- endif %}
resource
全局变量:任何模板页面都能获取,结合过滤器使用更佳
- resource.posts: 所有的文章 (使用自定义
find_category
filter 来获取完整的文章) - resource.pages: 所有的页面
- 由于本博客主题未使用ArchiveWriter等其它的writer. 需要获取全部文章就需要另外想办法
获取某分类下的全部文章 toc_category过滤器
{%- set items = resource.posts|toc_category(value.link) %}
{%- if items|length > 0 %}
{%- for item in items|sortby('-pubdate') %}
获取某分类下的全部文章 toc_category过滤器
{%- endfor %}
{%- endif %}
toc_category(string)
过滤器在theme.js 定义
module.exports = function(nico) {
var exports = {};
exports.filters = {
toc_category:function (pages, cat) {
var ret = [];
Object.keys(pages).forEach(function(key) {
var item = nico.sdk.post.read(key);
if (item.meta.category === cat) {
ret.push(item);
}
});
return ret;
}
}
nico 也为我们提供了一些方法、源码可查看
node_global\node_modules\nico\lib\sdk\filters.js
内置的方法有:
permalink_url (alias relative_url)
根据用户配置的 permalink style 来生成文章的链接。比如 {{permalink_url(post)}}
。
absolute_url (siteurl, item)
同 permalink_url, 但是生成的文章链接是绝对地址。
content_url (alias relative_url)
用来生成某地址的相对链接,比如当前所在页为 a/b.html
,在该页面里的 {{content_url('index.html')}}
将生成 ../
。
static_url (alias relative_url)
同 content_url ,用来生成静态文件的链接。如当前页为 a/b.html
,那么 {{static_url('css/a.css')}}
将生成 ../static/css/a.css
。
ps:你可以通过theme.js配置来新增一些方法。
filter
你需要了解 filter 是什么,请先阅读 swig 的文档。代码上来讲,filter 也是一类方法。
你可以通过配置来新增一些 filter。
The built in filters of nico:
xmldatetime
Generate a ISOString
of the Date.
markdown
Render the raw text to html with markdown.
highlight
Highlight a code block with specified language.
read
Read is designed for pagination.items
, to fulfill the post.
sortby
Sort items by a key. For example:
{{ items|sortby('pubdate') }} // reverse sort {{ items|sortby('-pubdate') }}
- [x] Striped tables
- [x] GitHub style task list items
- [x] CSS editable in settings
- [x] Option to require a space after
#
for Atx headers - [x] HTML Text tab to view the generated HTML
- [x] syntax highlighting, color striped tables by row and column in your source
- [x] Default and Darcula for syntax highlighting and for HTML Preview supported. CSS Style sheet for HTML Perview selectable in Settings/Other Settings/MultiMarkdown.
- [x] Add Lexer to use IntelliJ standard features
- [x] Add Standard HTML/CSS rendering engine to make styling easier.
- [ ] Add PsiBuilder compatible parser to implement expected comforts:
- [ ] formatting
- [ ] navigation
- [ ] document structure display