indienova 编辑须知 ver Beta 1.0.2

indienova 编辑所需要知道的一切，都在这里（版本号 ver Beta 1.0.2）

简介

indienova 改版以后，内容发布的方式进行了改变，主要需要注意的有以下几点：

  1. www 是我们的主站点，域名 https://indienova.com。
  2. 网站文章内容发布转移到 hugo 站，文章在 hugo 按照原来的方式发布，但是并不会自动同步到 www；
  3. 文章发布完成后需要到 1900 站（安全起见不提供外链地址）同步到 www；
  4. 文章要经过两次处理，分别获取 Mobile（移动）和 PC（桌面浏览器）的内容；
  5. 这里介绍的部分代码是要在同步完成后，针对 PC 版本代码的修改。因为大部分额外的工作都是针对 PC 版的。

发布流程

内容发布简要流程示意

hugo 编辑注意事项

hugo 编辑，请注意以下几点：

  1. 无必要的情况下，不要自行加入任何 style 代码；
  2. 无必要的情况下，不要自行加入任何 p 代码，系统自己会解析；
  3. 尽量简化，不要加入复杂的代码，如有需求，在同步后的 PC 代码中编辑；
  4. 引入的图片，不要带有查看大图的链接，那样会打开一张图片，体验很差；
  5. 确保内容无误再发布，不确定的时候可以保存草稿，并预览观看。

自动文章目录

针对：PC

PC 版的文章可以自动根据文章内容进行目录生成，方法是将需要变成目录项的内容加上 h4 标签。（效果请看本页面右侧）

有以下几个注意事项：

  • 因为使用 h4 来生成目录，所以文章中的非目录项请避免使用 h4 标签；
  • 如果文章最开始没有 h4 标注的目录项，那么系统会自动生成一个 <h4>引言</h4> 项目；
  • 为了遵循规范，文章内除了必要的内容以外，在内容中的小标题请均使用 h5 或者更小的标签；（比如 h6）
  • 文章目录不能带有链接和其它代码，应该是干净的文字内容；
  • 文章目录最好不要过长，折行效果不太美观。

视频标签

针对：Mobile PC

hugo 编辑状态

在 hugo 编辑的时候，目前还是仅仅支持插入 Youku 视频，插入方法如下：

<iframe src="http://player.youku.com/embed/视频编号" class="indienovaVideo" frameborder="0"></iframe>

随后在 1900 同步的时候会自动转换成 Mobile 和 PC 各自对应的代码。

PC 代码修改状态

此代码应仅仅在 PC 代码编辑状态下插入。

有的时候 PC 显示可能需要插入或者修改代码，那么可以按照下列方式插入：

<div class="embed-responsive embed-responsive-4by3 bottommargin-sm">
    <iframe src="http://player.youku.com/embed/视频编号?wmode=transparent" class="embed-responsive-item" frameborder="0"></iframe>
</div>

其中，embed-responsive-4by3 代表 4：3 尺寸，也可使用 embed-responsive-16by9 即为 16:9 尺寸。

另外，src 的地址也可以是其它任何提供内嵌视频功能网站提供的地址，比如 QQ、Tudou 等。

推广链接

针对：PC

不建议对 Mobile 部分使用此代码，应该在同步后专门在 PC 代码处修改。

到 GameJolt 去玩 -Synclox-

可以直接在线玩（可能需翻墙） 在线玩

代码：

<div class="promo promo-border promo-white bottommargin topmargin">
    <h3>主标题</h3>
    <span>副标题</span>
    <a href="链接" class="button button-dark button-xlarge button-border button-rounded" target="_blank">
        <i class="icon-display"></i> 在线玩
    </a>
</div>

其中，图标也可以有多种选择：

  • <i class="icon-display"></i>
  • <i class="icon-download"></i>
  • <i class="icon-apple"></i>
  • <i class="icon-windows3"></i>
  • <i class="icon-linux"></i>
  • <i class="icon-code"></i>
  • <i class="icon-steam"></i>
  • <i class="icon-github"></i>
  • <i class="icon-music"></i>

图片标注

针对：Mobile PC

图片标注有专门的代码：

标注内容

图片标注代码：

<div class="text-center image-caption"><small>标注内容</small></div>

请不要将图片放入这个 TAG 里面。

为了将标注紧贴图片，图片的 size-full 应该去掉（如果有的话）。

引用文字

针对：Mobile PC

在使用引用文字的时候，在 hugo 编辑的时候只要简单的使用编辑器提供的 blockquote 标签即可，不需要做特殊操作。

如果需要在 Mobile 或者 PC 代码中插入引用文字，可以有以下几种方式：

标准引用文字

这是一段标准的引用文字。

标准引用文字代码：

<blockquote><p>这是一段标准的引用文字。</p></blockquote>

带引号的引用文字

这是一段带引号的引用文字。

带引号的引用文字代码：

<blockquote class="quote"><p>这是一段带引号的引用文字。</p></blockquote>

带引号的大的引用文字

这是一段带引号的大的引用文字。

带引号的大的引用文字代码：

<blockquote class="quote"><p class="big">这是一段带引号的大的引用文字代码。</p></blockquote>

剧透内容块 new

针对：Mobile PC

有些内容需要隐藏，就像下面一样：

剧透内容：

这部分内容有剧透
请点击后再查看

  1. 隐藏的内容 A
  2. 隐藏的内容 B
  3. 隐藏的内容 C
  4. 隐藏的内容 D

剧透内容代码：

<div class="spoiler-div">
    <p class="spoiler-info">这部分内容有剧透<br>请点击后再查看</p>
    <div class="spoiler-content">
        ... 要隐藏的内容 ...
    </div>
</div>

BBCODE 方式支持：

现在提供了更为简单的 BBCODE 支持

标准剧透块

使用代码：

[spoilerblock]... 要隐藏的内容 ...[/spoilerblock]

不写提示内容就显示默认的“这部分内容有剧透（换行符）请点击后再查看”

这部分内容有剧透
请点击后再查看

  1. 隐藏的内容 A
  2. 隐藏的内容 B
  3. 隐藏的内容 C
  4. 隐藏的内容 D

自定义文字剧透块

写提示内容就要加入 text 属性：

[spoilerblock text="... 提示内容 ..."]... 要隐藏的内容 ...[/spoilerblock]

比如：

[spoilerblock text="想好再看哦"]结局其实就是开头，游戏是个闭环[/spoilerblock]

效果如下：

想好再看哦

结局其实就是开头，游戏是个闭环

Inline 剧透内容

使用代码：

[spoiler]... 要隐藏的内容 ...[/spoiler]

效果如下：

想好再看哦：结局其实就是开头，游戏是个闭环

Steam 和 Greenlight

针对：Mobile PC

有时候需要使用到 Steam 和 Greenlight 图片，下面是使用方法：

去绿光投票

SteamGreenlite

去绿光投票代码：

<a href="http://steamcommunity.com/sharedfiles/filedetails/?id=社区编号" target="_blank">
    <img src="https://hive.indienova.com/pond/2015/08/SteamGreenlight.png" alt="SteamGreenlite" width="1280" height="180" class="aligncenter size-full">
</a>

已经通过绿光

SteamGreenlite

已经通过绿光代码：

<a href="http://steamcommunity.com/sharedfiles/filedetails/?id=社区编号" target="_blank">
    <img src="https://hive.indienova.com/pond/2015/11/SteamGreenlite.png" alt="SteamGreenlite" width="1280" height="180" class="aligncenter size-full">
</a>

Steam 游戏 Widget

Steam 游戏 Widget代码：

<iframe src="https://store.steampowered.com/widget/Steam_编号/" frameborder="0" style="width: 100%; height: 220px;"></iframe>

Steam 绿光 Widget

Steam 绿光 Widget代码：（iOS 下目前有些问题）

<iframe src="http://steamcommunity.com/sharedfiles/widget/Steam_编号" style="width: 100%; height: 137px; border-radius:6px; -moz-border-radius: 6px; -webkit-border-radius: 6px;" class="steam_greenlight_widget" frameborder="0" scrolling="no"></iframe>

hugo 图片走马灯

针对：Mobile PC

在 hugo 编辑状态下，可以嵌入图片走马灯，代码如下：

[carousel arrows="display"]
[panel][/panel]
[panel][/panel]
[panel][/panel]
[panel][/panel]
[/carousel]

走马灯注意事项

  • 走马灯只允许一个
  • 走马灯内嵌的图片请通过编辑器插入，不要自己写图片代码；
  • 走马灯代码 [carousel] 前面，应该有封闭的 HTML TAG，比如 strong、h4、h5 等。

hugo 评测优缺点代码

在 hugo 编辑评测的优缺点的时候，代码如下：

<ol>
    <li></li>
    <li></li>
    <li></li>
</ol>

需要几个优点／缺点，就写几个 li。

indienova Widget

可以将 indienova 网站内容以 Widget 形式嵌入其它网站，代码如下：

<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width="290" height="450" src="Widget 地址"></iframe>

其中，Widget 地址就是正常地址 indienova.com/indie-game-... 变成 indienova.com/widget/indie-game-...

日志标签 new

针对：Blog

撰写日志的时候，可以在日志中加入标签，方式很简单，只需要：

[[ http://.... ]]

新的方式支持：

视频网站

  • 优酷视频（地址示例：http://v.youku.com/v_show/id_XNzYyMDkwNzMy.html）
  • 腾讯视频（地址示例：https://v.qq.com/page/f/0/1/f01599474p1.html）

音乐网站

  • 网易云音乐
    • 网易云音乐歌曲（地址示例：https://music.163.com/#/song?id=28941471）
    • 网易云音乐专辑（地址示例：https://music.163.com/#/album?id=2943337）
    • 网易云音乐播放列表（地址示例：https://music.163.com/#/m/playlist?id=157866798）

游戏网站

  • Steam 游戏（地址示例：https://store.steampowered.com/app/252950/）
  • Steam 绿光（地址示例：https://steamcommunity.com/sharedfiles/filedetails/?id=584074115）
  • indienova 文章（地址示例：https://indienova.com/indie-game-development/rooms-and-mazes-a-procedural-dungeon-generator/）

剧透内容：

标准剧透块

使用代码：

[spoilerblock]... 要隐藏的内容 ...[/spoilerblock]

不写提示内容就显示默认的“这部分内容有剧透（换行符）请点击后再查看”

这部分内容有剧透
请点击后再查看

  1. 隐藏的内容 A
  2. 隐藏的内容 B
  3. 隐藏的内容 C
  4. 隐藏的内容 D

自定义文字剧透块

写提示内容就要加入 text 属性：

[spoilerblock text="... 提示内容 ..."]... 要隐藏的内容 ...[/spoilerblock]

比如：

[spoilerblock text="想好再看哦"]结局其实就是开头，游戏是个闭环[/spoilerblock]

效果如下：

想好再看哦

结局其实就是开头，游戏是个闭环

Inline 剧透内容

使用代码：

[spoiler]... 要隐藏的内容 ...[/spoiler]

效果如下：

想好再看哦：结局其实就是开头，游戏是个闭环

旧有嵌入方式还适用：

  1. 视频：[video][/video]
    标签中间加入支持的视频地址（页面 URL 即可，不是内嵌地址）
  2. 网易云音乐：[yunmusic][/yunmusic]
    标签中间加入网易云音乐提供的嵌入代码即可

标准样式

针对：Mobile PC

在使用成块文本的时候（比如 div 或者 p），可以使用对齐方式。有如下三种方式：left right center

表现为：

左对齐文本

右对齐文本

居中显示文本

代码为：

<p class="text-left">左对齐文本</p>
<p class="text-right">右对齐文本</p>
<p class="text-center">居中显示文本</p>

在使用图片的时候（img），可以使用对齐方式。有如下三种方式：alignnone alignright aligncenter

表现为：

代码为：

<img src="/assets/images/logos/indienova.png" class="alignnone">
<img src="/assets/images/logos/indienova.png" class="alignright">
<img src="/assets/images/logos/indienova.png" class="aligncenter">

系统提供六种色彩样式：

  • 标准色彩示例 default
  • 标准色彩示例 primary
  • 标准色彩示例 success
  • 标准色彩示例 info
  • 标准色彩示例 warning
  • 标准色彩示例 danger

标签使用方法：

<span class="label label-primary">主色彩标签示例</span>
<span class="label label-warning">警告色彩标签示例</span>
<span class="label label-danger">危险色彩标签示例</span>

对应效果：

主色彩标签示例 警告色彩标签示例 危险色彩标签示例

文本使用方法：

<span class="text-primary">主色彩文本示例</span>
<span class="text-warning">警告色彩文本示例</span>
<span class="text-danger">危险色彩文本示例</span>

对应效果：

主色彩文本示例 警告色彩文本示例 危险色彩文本示例

标准图标

针对：Mobile PC

编辑过程中可以使用的图标（Icon），数量很多，请查看这里