CMS自定义导航及界面修改
10 个月前

注意事项

1、以下修改只针对当前最新模板projectz,模板文件路径为views/projectz。
2、以下描述的文件路径均以转码程序路径为参考,比如我安装在了/home文件夹,那从/home/express-ffmpeg开始按路径找文件。
3、如果想使用其它模板,可前往【CMS设置】切换模板,目前可用其它模板名称为supercms、light,由于开发时间问题,这2个模板可能部分功能来不及支持,所以会开发的可以参考projectz模板对其进行相关修改,模板文件夹路径为views/supercms和views/light。

修改模板导航显示类型

导航类型截图

默认导航配置

导航文件默认路径config/navbar.js,默认参数:

module.exports = {
    navbar: [{
        cntitle: '热门视频',
        tctitle: '熱門視頻',
        entitle: 'Hottest',
        href: '/hots'
    }, {
        cntitle: '试试手气',
        tctitle: '試試手氣',
        entitle: 'Random',
        href: '/random'
    }, {
        cntitle: '发现更多',
        tctitle: '發現更多',
        entitle: 'Discover',
        href: '/discover'
    }]
}

即安装后,CMS端导航默认只有热门视频、试试手气、发现更多等。

参数详解:

中文导航名称:cntitle: '发现更多',
繁体导航名称:tctitle: '發現更多',
英文导航名称:entitle: 'Discover',
导航所指向的访问路径:href: '/discover'  //该路径可以是相对首页域名的绝对路径,也可以是其它域名的绝对路径

新增音乐、直播、图集、文章导航

由于音乐、直播、图集、文章功能不是人人都有需求,所以默认没加入到导航,有需求的可以加一下,代码依次如下:

#直播的导航参数
{
 cntitle: '直播',
 tctitle: '直播',
 entitle: 'Live',
 href: '/lives'
}

#音乐的导航参数
{
 cntitle: '音乐',
 tctitle: '音樂',
 entitle: 'Music',
 href: '/audios'
}

#图集的导航参数,你可以命名为漫画
{
 cntitle: '图集',
 tctitle: '圖集',
 entitle: 'Atlas',
 href: '/mageslist'
}

#文章的导航参数,你也可以命名为资讯
{
 cntitle: '文章',
 tctitle: '文章',
 entitle: 'Article',
 href: '/articles'
} 

根据顺序加入到导航文件即可,注意标点符号,2个导航直接用英文,分开,修改后,使用命令pm2 reload all重启程序生效。

新增分类导航

目前后台设置的分类、标签管理、标签信息均在CMS导航的【探索更多】显示,如果你想将分类直接显示到导航,则可以自行操作。

比如我后台设置的分类为:电影、电视剧、恐怖片,则默认的前台访问路径为/category/电影/category/电视剧/category/恐怖片

提示:分类或者标签链接可以从【探索更多】中获取,一般访问地址为https://xx.com/category/恐怖片,则相对路径为/category/恐怖片。

3个分类导航代码参考如下:

#电影分类的导航参数
{
 cntitle: '电影',
 tctitle: '電影',
 entitle: 'Film',
 href: '/category/电影'
}

#电视剧分类的导航参数
{
 cntitle: '电视剧',
 tctitle: '電視劇',
 entitle: 'Tvs',
 href: '/category/电视剧'
}

#恐怖片分类的导航参数
{
 cntitle: '恐怖片',
 tctitle: '恐怖片',
 entitle: 'Horror',
 href: '/category/恐怖片'
}c

根据顺序加入到导航文件即可,注意标点符号,2个导航直接用英文,分开,修改后,使用命令pm2 reload all重启程序生效。

新增其它导航,比如群号、博客、APP下载

如果我想新增其它站点到导航,方便用户直接访问,则代码如下:

#博客名称EFV博客,路径https://efvcms.com
{
 cntitle: 'EFV博客',
 tctitle: 'EFV博客',
 entitle: 'EFV Blog',
 href: 'https://efvcms.com'
}

href参数填添加的导航名称访问地址即可,注意标点符号,2个导航直接用英文,分开,修改后,使用命令pm2 reload all重启程序生效。

修改模板左上角标题

首页模板左上角标题截图

修改方法

编辑模板文件views/projectz/cmslayout.jade,修改以下代码:

#大概在19-21行,ProjectX即为显示的标题,自行修改自己需要的
    img.uk-margin-small-right(uk-svg='', src='/img/uikit-logo.svg', hidden='true')
    |  ProjectX
.uk-navbar-right.nav-overlay

该修改会立即生效。

修改模板各个页面文字说明

现在前后台90%以上的文字说明都存放进了语言文件,路径为locales,简体文件cn.json,繁体文件tc.json,英文文件en.json

修改示例,如果我要修改简体中文下的注册页面的相关描述,如:

完美高清
从360P到1080P视频完全用户自主切换,高品质视频分发,T级带宽保证播放流畅度
三端全面打通
PC端,wap端,app端,想什么时候看就在什么时候看,想在什么哪看就在哪看,满足您所有的需求。
绝佳用户体验
超现代产品设计和界面设计,尊重用户所有时刻、所有地点、全部的使用体验,欢迎注册体验。

那么我编辑简体文件locales/cn.json,找到以上关键词,每行都为单独的语言翻译,比如我搜索完美高清,以行为单位,然后进行相关文字修改,最后使用命令pm2 reload all重启程序生效。

修改模板相关弹窗提示信息

弹窗提示信息修改

修改涉及到的相关文件如下:

controller/cms.js,cms控制器,不会改的不用管。
locales,语言文件夹,存放相关提示文字信息,简体文件cn.json,繁体文件tc.json,英文文件en.json。

修改示例

比如我要修改播放视频时候的某个弹窗,如下:

先找到简体文件locales/cn.json,查找提示文字信息,找到指定行进行修改即可,注意%s为变量参数,勿乱改,只改其它信息即可,最后使用命令pm2 reload all重启程序生效。

修改模板默认显示语言

目前安装的时候,默认使用简体中文,还可以修改成繁体、英文,修改方法如下:

编辑config/auth.js文件,修改该参数defaultlocale: "cn"cn为简体中文,tc为繁体中文,en为英文,语言文件夹为locales,最后使用命令pm2 reload all重启程序生效。