Merge pull request #807 from shenlebantongying/custom_js_injectino

feat: add `article-script.js`
This commit is contained in:
xiaoyifang 2023-06-04 17:34:16 +08:00 committed by GitHub
commit 87358f73c6
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 38 additions and 6 deletions

View file

@ -201,6 +201,12 @@ body { background: #242525; }
</script>
)";
}
// load the `article-style.js` in user's config folder
if ( auto userJsFile = Config::getUserJsFileName(); userJsFile.has_value() ) {
result += fmt::format( FMT_COMPILE( R"(<script src="file://{}"></script>)" ), userJsFile.value() );
}
result += "</head><body>";
return result;

View file

@ -2262,6 +2262,17 @@ QString getUserCssFileName()
return getHomeDir().filePath( "article-style.css" );
}
std::optional< std::string > getUserJsFileName()
{
QString userJsPath = getHomeDir().filePath( "article-script.js" );
if ( QFileInfo::exists( userJsPath ) ) {
return userJsPath.toStdString();
}
else {
return std::nullopt;
}
}
QString getUserCssPrintFileName()
{
return getHomeDir().filePath( "article-style-print.css" );

View file

@ -14,6 +14,7 @@
#include <QMetaType>
#include "ex.hh"
#include <QLocale>
#include <optional>
/// GoldenDict's configuration
namespace Config {
@ -807,9 +808,12 @@ QString getHistoryFileName() ;
/// Returns the filename of a favorities file.
QString getFavoritiesFileName() ;
/// Returns the user .css file name.
/// Returns the user .css file name (article-style.css).
QString getUserCssFileName() ;
/// Returns the user .js file name (article-script.js).
std::optional< std::string > getUserJsFileName();
/// Returns the user .css file name used for printing only.
QString getUserCssPrintFileName() ;

View file

@ -1,7 +1,18 @@
# User defined stylesheets
By creating `article-style.css` or `article-script.js` in GoldenDict's configuration folder (beside the `config` file), you can change dictionaries' presentation or inject javascript to dictionaries.
To change of dictionary articles presentation you can create the file with styles which will be used while articles output. Such file must be named `article-style.css` and placed in GoldenDict configuration folder beside the "config" file. The `article-style.css` is just style sheet file wrote in accordance with standard html style sheet rules. To see a class names used in articles you can call inspector via article context menu.
The `article-style.css` is just standard HTML [Style Sheets](https://developer.mozilla.org/docs/Web/CSS). To know class or id names used in article, you can open inspector by right click article's body and click `Inspect (F12)`. The inspector's documentation can be found at [Chrome DevTools](https://developer.chrome.com/docs/devtools/)
Also you can tune GoldenDict interface. To make it you should create the `qt-style.css` style sheet file in GoldenDict configuration folder beside the "config" file. The rules for Qt style sheets you can find here.
You can adjust dark reader mode's parameter by add those lines to `article-script.js`
The examples of "article-style.css" and "qt-style.css" files you can find in GoldenDict
```javascript
DarkReader.enable({
brightness: 100,
contrast: 100,
sepia: 0,
grayscale: 0,
});
```
Also, you can tune GoldenDict's interface by creating `qt-style.css` style sheet file in GoldenDict configuration folder. It is a [Qt Style Sheet](https://doc.qt.io/qt-6/stylesheet-reference.html) loaded during startup.
Samples of `article-style.css` and `qt-style.css` files can found in GoldenDict's source code at [/src/stylesheets](https://github.com/xiaoyifang/goldendict-ng/tree/staged/src/stylesheets)

View file

@ -38,7 +38,7 @@ nav:
- Special Usages:
- Anki Integration: topic_anki.md
- Command Lines: topic_commandline.md
- Custom Stylesheets: topic_userstyle.md
- Custom Stylesheet & JavaScript: topic_userstyle.md
- Portable Mode: topic_portablemode.md
- Custom transliteration: topic_transliteration.md
- Customize Dictionary Name: custom_dictionary_name.md