Nico 静态博客使用说明

定制化的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 |

#特殊符号
&copy; &  &uml; &trade; &iexcl; &pound;
&amp; &lt; &gt; &yen; &euro; &reg; &plusmn; &para; &sect; &brvbar; &macr; &laquo; &middot;
X&sup2; Y&sup3; &frac34; &frac14;  &times;  &divide;   &raquo;
18&ordm;C  &quot;  &apos;

媒体排版

![alt="说明"](url地址)
[![](url)](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