[攻略心得] [NGA常用BBS代码]排版的艺术2021--基于NGA TeX排版系统的全新排版指南(尽可能使用电脑阅读)

标题

NGA排版的艺术2021
基于NGA TeX排版系统的全新排版指南

版权声明

遵循 CC BY-NC-ND 4.0协议发布，非许可禁止用于商业用途！

LOGO

0.前言

• 距离上次NGA内系统性的讲授排版技术的帖子已经过去了四年,这四年里NGA的编辑器与界面又有了相当的变化,加上各类插件的发展,攻略作者对排版的需求日益增加,本文主要就自研的 NGA TeX排版系统 ,由浅入深地讲述如何高效快捷的排版好一篇精品攻略.
  
  
  
• 众所周知的是,随着手机的不断发展,手游板块在nga中占的比重越来越大,手机端的访问量也日益增多.其中手游板块绝大多数的访问都来自手机app.当我们面对排版时,更应该关注的是手机端app的访问效果,由于部分编辑代码并不能在手机端正常使用, 如何做好兼容度和美观的平衡尤为重要 .
  

前情提要:[NGA常用BBS代码][奥运帖]Project N —— 《从入门到精通：排版的艺术 Ver.3》

目录

1.何为NGA TeX排版系统? 2.NGA TeX排版系统语言规范 2.1 基本框架 2.2 代码格式 2.3 注释 2.4 代码显示 [1] 3.基本代码详解 3.1 字体样式代码 3.1.1 概览 3.1.2 加粗 3.1.3 字号 3.1.4 颜色 3.1.5 斜体 3.1.6 字体 [1] 3.2 版式样式代码 3.2.1 概览 3.2.2 对齐方式 3.2.3 下划线 3.2.4 删除线 3.2.5 分割 [1] 3.3 资源代码 3.3.1 概览 3.3.2 图片

1.何为NGA TeX排版系统?

1正文

• 在撰写了无数的攻略之后,我发现nga本身的编辑器并不重视严格的语法规范,即使出现了错误与缺漏,编辑器仍能给出正确的显示效果,只有红色提示而已.同时在面对极其复杂的文章,或者是长文时,nga自带的编辑器并不好用,长篇堆叠的黑色代码难以处理与改动,这也是排版系统出现的根本原因.
  
  
  
• 经历一定的研究后,NGA TeX排版系统选择了借助Notepad++这一开源软件作为依托.将nga的编辑语言修改为具有极其严格的语法规范的语言,同时借助代码高亮,函数自动完成&对齐检查功能,更高效的完成nga攻略的设计与排版任务.
  NGA TeX排版系统实现了文章撰写与文章排版共同完成的目标 ,相较于原生编辑器需先完成文章再进行排版的流程,排版系统能够给予作者更好的编辑体验.
  

2.NGA TeX排版系统语言规范

2正文
NGA TeX排版系统具有严格的语法规范,这不但方便作者/联合作者日后的修改与编辑,同时也方便兼容之后的自动排版脚本,具体表现如下:

• 1.基本框架
  在编辑时,全文由quote与collapse进行分割，每一块内容必须包含在一定的quote与collapse内,允许嵌套数层框架.
  框架的内容标题与框架代码处于同一行,之间保留空格.
  例：
  (为了兼顾手机版视图,此处的方括号换为了大括号)
  

  {table}{tr}{td2} {align=center} {b} 代码 {/b} {/align} {/td}{td2} {align=center} {b} 表现 {/b} {/align} {/td} {/tr}{tr}{td}{/table}{quote} 标题1正文1正文2正文3{/quote}{collapse}正文1正文2{quote} 标题2正文夹心{/quote}正文3{/collapse}{/td}{td}{quote} 标题1正文1正文2正文3{/quote}{collapse}正文1正文2{quote} 标题2正文夹心{/quote}正文3{/collapse} {/td} {/tr}{/table}

  
  
  
• 2.代码格式
  
  • 框架代码与版式代码 另起一行书写， 字体代码与资源代码 要求一行完成
    
  • 框架代码&复杂结构代码 之间保留一行空行，其余代码之间不空行
    (如果是为了辨别文章区段,建议使用注释功能,而不是空行)
    
  • 每行的 行前行后不留空格 ，代码语句前后空格。
    
  • 对于list与table这类复杂结构代码 要求头尾对齐 。
    
  
  
  例：
  

  1.英雄调整 标题 正文aaa 正文bbb 第一行 第二行[td1] 目录

  
  
  [/collapse]
  
  

1.英雄调整

点击展开

标题

正文aaa
正文bbb

• 第一行
  
• 第二行
  

 12321 

3.列结构代码列结构代码仍需另起一行[td colspan =7.数学代码  

3.列结构代码列结构代码仍需另起一行[td colspan =7.数学代码  

3 基本代码详解

3.1 字体样式代码

3.1.1 概览

字体样式代码是对单一字符的样式进行修改,主要由以下五类组成:

 加粗  字号  颜色  字体 斜体 

3.1.2 加粗

加粗 加粗	加粗 加粗

3.1.3 字号

80%字号；90%字号 ；默认字号 ；110%字号 ；120%号 ；130%字号 ；140%字号 ；150%字号	80%字号； 90%字号 ； 默认字号 ； 110%字号 ； 120%号 ； ； ；

3.2 版式样式代码

3.2.1 概览

版式样式代码是对句子&段落的样式进行修改,主要由以下五类组成:

 下划线  对齐方式  删除线 ====== 分割线 段落标题 

3.2.2 对齐方式

默认就是左侧对齐所以不用设置这是中间对齐这是右侧对齐	默认就是左侧对齐所以不用设置 这是中间对齐 这是右侧对齐

3.2.3 下划线

我的邮箱：cccAAA&11%111@xx.com	我的邮箱： cccAAA&11%111@xx.com

3.3 资源代码

3.3.1 概览

资源代码可以在帖子中调用外部资源,主要由以下四类组成:
(为了兼顾手机版视图,此处的方括号换为了大括号)

 xxx[/img}[album=xxxxx] [/album] {url}

3.3.2 图片

http://aaa11bbb.com.jpg	手动翻到最顶上

3.3.3 链接

网址；文字或图片作为网址超链接:文字；图片网络地址	略

3.4 复杂结构代码

3.4.1 概览

复杂结构代码主要负责生成复杂的框体结构,主要由以下三类组成:

其使用难度跨度极大,表现效果也是nga中最为丰富的

3.4.2 列表

1.何为NGA TeX排版系统? 2.NGA TeX排版系统语言规范 2.1 基本框架 2.2 代码格式 2.3 注释 2.4 代码显示 [1] 3.基本代码详解 3.1 字体样式代码 3.1.1 概览 3.1.2 加粗 3.1.3 字号 3.1.4 颜色 3.1.5 斜体 3.1.6 字体 [1] 3.2 版式样式代码 3.2.1 概览 3.2.2 对齐方式 3.2.3 下划线 3.2.4 删除线 3.2.5 分割 [1] 3.3 资源代码 3.3.1 概览 3.3.2 图片 3.3.3 链接 3.3.4 相册 [1] [2] 3.3.5 视频 [1] [2] 3.4 复杂结构代码 3.4.1 概览 3.4.2 列表 3.4.3 表格 3.4.4 随机块 [1] [2] 3.5 数学代码	点击查看 编辑器

3.4.3 表格 [/code][/td][/tr][/table]

3.5 小工具代码

3.5.1 概览

小工具代码顾名思义,一些很有趣的小工具,主要由以下几类组成:

 comment gameinnerHTML $votedata这部分代码大多使用率极低,故没有添加至代码高亮内容中,同时大多数代码为实验性功能

3.5.2 上下标

正文上角标下角标	正文上角标下角标

3.5.3 随机数

d100	🎲 d100

============

4.如何使用NGA TeX排版系统?

4.1 环境配置

4.1.1 安装软件

• 安装notepad++软件,尽可能使用安装,而不是携带版
  (请自寻下载方式)
  
  
  
• 安装NGA可视化编辑器插件,并启用
  由用户fyy99所开发,特别感谢
  下载链接: [NGA用户脚本] 用户脚本开发：实时预览&输入快捷键
  
  
  
• 导入语言格式
  下载NGA TeX 1.05文件,并导入到notepad++之中
  下载链接:Github下载链接
  
  
  
• "语言"选项框中最下方选择NGA TeX 1.05
  
  
  
• 配置完成
  

4.2 文章预处理

• 适用于非NGA TeX文件:
  
• 菜单栏"编辑"-"空白字符操作"-"移除行首和行尾空格"
  
• 菜单栏"搜索"-"替换"
  将"["之前添加一个空格,"]"之后添加一个空格,"="前后添加一个空格
  
• 这时候应该就能看到高亮的语法函数了
  

5.排版的美学

5.1 树状关系

• 当你在看文字信息时找不到一种可以贯通的阅读方式，就会降低这篇文章的可读性,即一篇攻略需要以一个由浅入深的结构展开,而不是东一榔头西一棒槌.树状关系就像是有一条无形的线把文字信息串联起来，起到一种引导阅读的作用
  
• 排版的目的是帮助用户整理信息，那么信息就会有主次之分，这就需要通过文字对比来实现，例如主次区分可以是:大小的区分、颜色的区分等等：既然要做对比、分主次，那就要让主次分明足够明显，这就需要作者对文章的树状关系有着深刻的掌握.
  
• 在NGA中,树状结构主要用于使文章形成关联,即它是一篇文章,而不是一堆话堆在一起
  

5.2 层级结构

• 在NGA中,我推荐排版时使用三级标题,包含150,130,110%三种字号的标题,对应三种word标题,既方便前期排版使用,也便于生成目录,同时有助于理顺层级结构.
  
• 尽可能将文章划分为几个大板块,例如版本前瞻,符文出装,玩法心得等大块,在每一大块中再插入小板块,例如版本前瞻中的版本变化,英雄调整,装备改动等等.使文章一层层逐级展开,更加简洁易懂
  

5.3 清晰醒目

• 清晰醒目主要和文章的字号,颜色,格式与疏密度相关
  
• 由于NGA的显示问题,字号的使用建议划分梯度,例如150.130.110.100四档,而不是使用相邻的字号,从而方便辨认
  
• 颜色上可以使用多种鲜艳的颜色标明重点,但一篇文章内尽可能不要使用太多的色系,浅蓝-蓝色-深蓝就是一种不错的选择.

6.后记

NGA TeX排版系统自去年9月起开始构思,期间从VB,C++,python等多个语言进行了实验,考虑到受众差距极大的代码水平后,还是选择了回退到最初一版的notepad方案.事实证明这也是明智之举,选择简单的软件更能便于新入门的作者尽快上手.NGA TeX排版系统经历过几次试验后确定了其稳定性与高效性,希望他能给NGA的攻略作者带来更好的编辑体验.

距离上次的NGA排版教程已经过了四年,在此期间随着网络游戏的发展,大量的攻略作者涌入NGA之中,他们对攻略排版的教程的需求显而易见的,于是这一篇NGA TeX排版系统的说明书,就被我改造成了排版的艺术2021,也算是对之前奥运贴的传承吧

希望这篇文章能够催生更多的优秀攻略产出,让排版不再是写攻略上的绊脚之石.

另预祝新年快乐

catecholamine

特别感谢以下成员的支持:

@nnexus 上一版NGA排版指南作者
@fyy99 NGA可视化编辑插件作者
@Nigthelf 提供了实验靶场
王者荣耀稷下图书馆办公室全员

完结撒花

7.附录

1.更新记录
======
2021.2.3 初稿完成


2.本文经NGA TeX排版后编辑器界面展示
======
完全的模块化设计,极易增删改查

Topic Post by Catecholamine (2021-02-03 17:17):

可以使网址具有超链接效果，对于外部链接会有跳转提示

引用 fyy992021-02-03 17:44

补充：
1.部分链接会被屏蔽
2.支持/thread.php?fid=516此类路径

引用 dboy1989042021-02-04 22:03

让我想起来用Latex写论文的日子

引用 Catecholamine2021-03-06 12:19

这牵扯到屏幕自适应的问题,一般来说等比例没法实现严格的2:1:1.
只能说是bug了