MoodleMobile2客製化
要客製化MoodleMobile2的圖片、風格顏色、及預設網站很容易,只要俢改一些參數內容,然後重新編
修改 config.xml
config.xml
<widget>
後面的id,這個是最重要的,以邊是把網址倒過來寫,然後再加上app的名稱,這個id是需要唯一值,在上架的時後,也是會檢查這個id,如果相同是不能上架的,目前是修改成「tw.edu.welearn.moodlemobile」,後面的版本最好不要修改,這樣之後官方有更新時,就依官方的版本走,比較不會有問題<name>
這個參數就是app安裝好後,所看到的文字,這邊使用「一起魔課」<description>
只是說明,修改成「WeLearn Moodle Mobile official app」<author>
這部份目前沒有做修改
原始內容
<widget xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0" id="com.moodle.moodlemobile" version="3.4.0">
<name>Moodle Mobile</name>
<description>
Moodle Mobile official app
</description>
<author href="http://moodle.com" email="mobile@moodle.com">
Moodle Mobile team
</author>
修改內容
<widget xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0" id="tw.edu.welearn.moodlemobile" version="3.4.0">
<name>一起魔課</name>
<description>
WeLearn Moodle Mobile official app
</description>
<author href="http://moodle.com" email="mobile@moodle.com">
Moodle Mobile team
</author>
修改 www/config.json
www/config.json
app_id
:此id需要和config.xml設定值相同languages
:預設值為「en」,修改成「zh-tw」demo_sites
:這部分請清空…改為「""」siteurl
:此設定值為app進入後主要連線的網址,目前設定成「https://welearn.edu.tw」
原始內容
{
"app_id" : "com.moodle.moodlemobile",
"appname": "Moodle Mobile",
"desktopappname": "Moodle Desktop",
"versioncode" : "2021",
"versionname" : "3.4.0",
"cache_expiration_time" : 300000,
"default_lang" : "en",
"languages": {"ar": "عربي", "bg": "Български", "ca": "Català", "cs": "Čeština", "da": "Dansk", "de": "Deutsch", "de-du": "Deutsch - Du", "el": "Ελληνικά", "en": "English", "es": "Español", "es-mx": "Español - México", "eu": "Euskara", "fa": "فارسی", "fi": "Suomi", "fr" : "Français", "he" : "עברית", "hu": "magyar", "it": "Italiano", "ja": "日本語", "lt" : "Lietuvių", "mr": "मराठी", "nl": "Nederlands", "pl": "Polski", "pt-br": "Português - Brasil", "pt": "Português - Portugal", "ro": "Română", "ru": "Русский", "sr-cr": "Српски", "sr-lt": "Srpski", "sv": "Svenska", "tr" : "Türkçe", "uk" : "Українська", "zh-cn" : "简体中文", "zh-tw" : "正體中文"},
"wsservice" : "moodle_mobile_app",
"wsextservice" : "local_mobile",
"demo_sites": {"student": {"url": "https://school.demo.moodle.net", "username": "student", "password": "moodle"}, "teacher": {"url": "https://school.demo.moodle.net", "username": "teacher", "password": "moodle"}},
"gcmpn": "694767596569",
"customurlscheme": "moodlemobile",
"siteurl": "",
"multisitesdisplay": "select",
"skipssoconfirmation": "false",
"forcedefaultlanguage": "false",
"privacypolicy": "https://moodle.org/mod/page/view.php?id=8148"
}
修改內容
{
"app_id" : "tw.edu.welearn.moodlemobile",
"appname": "Moodle Mobile",
"desktopappname": "Moodle Desktop",
"versioncode" : "2021",
"versionname" : "3.4.0",
"cache_expiration_time" : 300000,
"default_lang" : "zh-tw",
"languages": {"ar": "عربي", "bg": "Български", "ca": "Català", "cs": "Čeština", "da": "Dansk", "de": "Deutsch", "de-du": "Deutsch - Du", "el": "Ελληνικά", "en": "English", "es": "Español", "es-mx": "Español - México", "eu": "Euskara", "fa": "فارسی", "fi": "Suomi", "fr" : "Français", "he" : "עברית", "hu": "magyar", "it": "Italiano", "ja": "日本語", "lt" : "Lietuvių", "mr": "मराठी", "nl": "Nederlands", "pl": "Polski", "pt-br": "Português - Brasil", "pt": "Português - Portugal", "ro": "Română", "ru": "Русский", "sr-cr": "Српски", "sr-lt": "Srpski", "sv": "Svenska", "tr" : "Türkçe", "uk" : "Українська", "zh-cn" : "简体中文", "zh-tw" : "正體中文"},
"wsservice" : "moodle_mobile_app",
"wsextservice" : "local_mobile",
"demo_sites": "",
"gcmpn": "694767596569",
"customurlscheme": "moodlemobile",
"siteurl": "https://welearn.edu.tw",
"multisitesdisplay": "select",
"skipssoconfirmation": "false",
"forcedefaultlanguage": "false",
"privacypolicy": "https://moodle.org/mod/page/view.php?id=8148"
}
修改scss/app.scss
scss/app.scss
修改此檔為改變app底色,原本為橘色,修改成與一起魔課相同為藍色
在$yellow-dark
;這行下方加入$blue2
的設定
$yellow: #fbad1a; // Accent (never text).
$yellow-light: mix($yellow, white, 20%);
$yellow-dark: mix($yellow, black, 40%);
$blue2: #1899df; // Accent (never text).
$blue2-light: lighten($blue2, 10%);
修改$mm-color後方的變數為$blue2,還有下方兩行的色碼,為啟動畫面的背景顏色,會搭配「www/img/logo_white.png 」顯示
$mm-color: $blue2;
$mm-color-init-screen: #1273e7;
$mm-color-init-screen-alt: #168ae2;
更換圖檔
www/img/logo_white.png :當app切換畫面時,有時後會出現Moodle的圖案
www/img/logo.png :在登入畫面時,上方的logo圖
resources/splash.png :app完整關閉不能在背景執行,剛啟動時會出現的畫面 (2732X2732)
resource/iso/icon.png :安裝在iOS行動裝置上的icon圖 (1024x1024)
resource/android/icon.png :安裝在Android行動裝置上的icon圖 (1024x1024)
執行ionic resource
ionic resource
圖檔都更新好後,請執行「ionic resource」,將會自動產生不同size的圖檔,請確認過程是否有錯,果有錯請先檢查圖檔的size是否正確。
allen-mba:WelearnMM2 allen$ ionic resources
Ionic icon and splash screen resources generator
uploading android/icon.png...
uploading ios/icon.png...
uploading splash.png...
ios/icon.png (1024x1024) upload complete
splash.png (2732x2732) upload complete
android/icon.png (1024x1024) upload complete
generating icon android drawable-xxxhdpi-icon.png (192x192)...
generating icon android drawable-xxhdpi-icon.png (144x144)...
generating icon android drawable-xhdpi-icon.png (96x96)...
icon android drawable-xhdpi-icon.png (96x96) generated
generating icon android drawable-hdpi-icon.png (72x72)...
icon android drawable-xxxhdpi-icon.png (192x192) generated
generating icon android drawable-mdpi-icon.png (48x48)...
icon android drawable-xxhdpi-icon.png (144x144) generated
generating icon android drawable-ldpi-icon.png (36x36)...
icon android drawable-ldpi-icon.png (36x36) generated
generating icon ios icon-small@3x.png (87x87)...
icon android drawable-mdpi-icon.png (48x48) generated
generating icon ios icon-small@2x.png (58x58)...
icon android drawable-hdpi-icon.png (72x72) generated
generating icon ios icon-small.png (29x29)...
icon ios icon-small.png (29x29) generated
generating icon ios icon-83.5@2x.png (167x167)...
icon ios icon-small@2x.png (58x58) generated
generating icon ios icon-76@2x.png (152x152)...
icon ios icon-small@3x.png (87x87) generated
generating icon ios icon-76.png (76x76)...
icon ios icon-76.png (76x76) generated
icon ios icon-72@2x.png (144x144) generated
icon ios icon-72.png (72x72) generated
generating icon ios icon-60@3x.png (180x180)...
icon ios icon-83.5@2x.png (167x167) generated
generating icon ios icon-60@2x.png (120x120)...
icon ios icon-76@2x.png (152x152) generated
generating icon ios icon-60.png (60x60)...
icon ios icon-60@3x.png (180x180) generated
generating icon ios icon-50@2x.png (100x100)...
icon ios icon-60@2x.png (120x120) generated
generating icon ios icon-50.png (50x50)...
icon ios icon-60.png (60x60) generated
icon ios icon-40@3x.png (120x120) generated
generating icon ios icon-40@2x.png (80x80)...
icon ios icon-50.png (50x50) generated
generating icon ios icon-40.png (40x40)...
icon ios icon-50@2x.png (100x100) generated
generating icon ios icon@2x.png (114x114)...
icon ios icon-40@2x.png (80x80) generated
generating icon ios icon.png (57x57)...
icon ios icon-40.png (40x40) generated
generating splash ios Default~iphone.png (320x480)...
icon ios icon@2x.png (114x114) generated
generating splash ios Default@2x~iphone.png (640x960)...
icon ios icon.png (57x57) generated
generating splash ios Default-Portrait~ipad.png (768x1024)...
splash ios Default~iphone.png (320x480) generated
generating splash ios Default-Portrait@~ipadpro.png (2048x2732)...
splash ios Default@2x~iphone.png (640x960) generated
generating splash ios Default-Portrait@2x~ipad.png (1536x2048)...
splash ios Default-Portrait~ipad.png (768x1024) generated
generating splash ios Default-Landscape~ipad.png (1024x768)...
splash ios Default-Portrait@~ipadpro.png (2048x2732) generated
generating splash ios Default-Landscape@~ipadpro.png (2732x2048)...
splash ios Default-Landscape~ipad.png (1024x768) generated
generating splash ios Default-Landscape@2x~ipad.png (2048x1536)...
splash ios Default-Portrait@2x~ipad.png (1536x2048) generated
generating splash ios Default-Landscape-736h.png (2208x1242)...
splash ios Default-Landscape@~ipadpro.png (2732x2048) generated
generating splash ios Default-736h.png (1242x2208)...
splash ios Default-Landscape@2x~ipad.png (2048x1536) generated
generating splash ios Default-667h.png (750x1334)...
splash ios Default-Landscape-736h.png (2208x1242) generated
generating splash ios Default-568h@2x~iphone.png (640x1136)...
splash ios Default-736h.png (1242x2208) generated
generating splash android drawable-port-xxxhdpi-screen.png (1280x1920)...
splash ios Default-667h.png (750x1334) generated
generating splash android drawable-port-xxhdpi-screen.png (960x1600)...
splash ios Default-568h@2x~iphone.png (640x1136) generated
generating splash android drawable-port-xhdpi-screen.png (720x1280)...
splash android drawable-port-xhdpi-screen.png (720x1280) generated
generating splash android drawable-port-hdpi-screen.png (480x800)...
splash android drawable-port-xxhdpi-screen.png (960x1600) generated
splash android drawable-port-mdpi-screen.png (320x480) generated
generating splash android drawable-port-ldpi-screen.png (240x320)...
splash android drawable-port-xxxhdpi-screen.png (1280x1920) generated
generating splash android drawable-land-xxxhdpi-screen.png (1920x1280)...
splash android drawable-port-ldpi-screen.png (240x320) generated
generating splash android drawable-land-xxhdpi-screen.png (1600x960)...
splash android drawable-port-hdpi-screen.png (480x800) generated
generating splash android drawable-land-xhdpi-screen.png (1280x720)...
splash android drawable-land-xxxhdpi-screen.png (1920x1280) generated
generating splash android drawable-land-hdpi-screen.png (800x480)...
splash android drawable-land-xxhdpi-screen.png (1600x960) generated
generating splash android drawable-land-mdpi-screen.png (480x320)...
splash android drawable-land-xhdpi-screen.png (1280x720) generated
generating splash android drawable-land-ldpi-screen.png (320x240)...
splash android drawable-land-hdpi-screen.png (800x480) generated
splash android drawable-land-ldpi-screen.png (320x240) generated
splash android drawable-land-mdpi-screen.png (480x320) generated
Last updated
Was this helpful?